CSS样式中定义了多种字体,如何确定具体使用的是哪一种

天才小帅 2017-05-25 10:30:57 208℃ 0条

CSS样式

浏览网页时有时会觉得某个网页的字体很好看,用firedebug查一下,发现css中font-family属性定义了多种字体 ,鼠标放上去也会显示字体预览,但是这么字体,到底用的是哪种呢?下面就给大家详细说一下:

以战网登陆页面为例:

CSS样式

https://www.battlenet.com.cn/login/zh/?ref=http://www.battlenet.com.cn/zh/&app=com-root

查看登陆框里字体的样式,用firefox打开网页,右键点击登陆框,再点查看元素,即可调出firedebug,在右侧的规则中,找到font-family属性,然后查看里面的值,如第一张图中

这是的值有很多,设置这么值的原因是如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

这是的第一个值是blizzard字体,这个字体不是电脑自带的,字体网站也搜索不到,到这是不是就认为该查看下一个字体了?

不,还没完呢

粗略的看一下后面的字体,Arial,Yahei,这种字体肯定不是这种样式的,既然上面说过,如果第一个字体不存在的话,浏览器就会选择第二个字体,现在这个字体肯定不是第二个,那么第一种字体是确实存在的。

这是就出现另一种情况了,CSS是可以定义字体的。

查看网页源码,看一下调用的CSS文件。

<title>暴雪游戏通行证登录</title>
<link rel="shortcut icon" href="/login/static/images/meta/favicon.0gxnz.ico" />
<!--[if gt IE 8]><!--><link rel="stylesheet" type="text/css" media="all"     href="/login/static/css/toolkit/blizzard-web.min.2bTZH.css" /><!-- <![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" media="all" href="/login/static/css/toolkit/blizzard-web-ie8.min.css?v=58-1" /><![endif]-->
<link rel="stylesheet" type="text/css" media="all" href="/login/static/css/login/global.min.2UWdY.css?v=1" />
<link rel="stylesheet" type="text/css" media="all" href="/login/static/css/nav-client/nav-client.2uTvW.css" />
<link rel="stylesheet" type="text/css" media="(max-width:800px)" href="/login/static/css/nav-client/nav-client-responsive.0R6NA.css" />

先从第一个找吧。CSS定义字体是通过@font-face定义的,在第一个css文件中搜索@font-face,果然出来了

@font-face{font-family:"Blizzard";font-style:normal;font-weight:300;src:local("Blizzard Light"),local("Blizzard-Light"),url("fonts/blizzard-light.3ARY7.woff") format("woff")}
@font-face{font-family:"Blizzard";font-style:normal;font-weight:400;src:local("Blizzard"),local("Blizzard"),url("fonts/blizzard-regular.3GHNU.woff") format("woff")}
@font-face{font-family:"Blizzard";font-style:italic;font-weight:400;src:local("Blizzard Italic"),local("Blizzard-Italic"),url("fonts/blizzard-regular-italic.1jLGm.woff") format("woff")}
@font-face{font-family:"Blizzard";font-style:normal;font-weight:700;src:local("Blizzard Bold"),local("Blizzard-Bold"),url("fonts/blizzard-bold.2ZxWn.woff") format("woff")}

url属性里的值就是字体所在目录,这里看到是个相对引用,就是说和css所在目录是同级的,css的路径是

https://www.battlenet.com.cn/login/static/css/toolkit/blizzard-web.min.2bTZH.css

那么这个字体的位置就是

https://www.battlenet.com.cn/login/static/css/toolkit/fonts/blizzard-light.3ARY7.woff

下载下来后,拖到C:WindowsFonts目录,提示不能安装,那就转换一下格式。

http://www.zitikoudai.com/woff-converter/

我用的是这个在线转换,上传woff字体,接着下载转好的ttf压缩包,解压,安装,然后在word里测试一下

CSS样式

Done!

标签: none

「感觉有帮助?解决了大问题?一键投喂 牛奶/咖啡/冰阔乐!」

天才小帅

(๑>ڡ<)☆哇~太棒了!

使用微信扫描二维码完成支付

非特殊说明,本博所有文章均为博主原创,并遵循CC BY-NC-SA 4.0 协议许可。

评论啦~