木灵鱼儿
阅读:3793
自定义字体font-face中的font-style、font-weight详解
自定义字体相信大家都知道是font-face,但是自定义下来总是有一大段代码,其中引用字体的我们就不谈了,这个比较简单的,我们谈的是里面经常出现的font-style和font-weight,这两个代表的含义!
font-style顾名思义,就是字体的风格,常用的就是斜体(initial),非斜体(normal)。
font-weight就是设置字体的字重,也就是粗细,100-900。
那么为什么每次自定义字体都会出现这两个呢,而且一般都是设置重置normal,既然都是默认,再写一遍岂不是多余???
其实不能这么理解,我们应该将其理解为引用的——条件
——,并且一般是用于多套字体,一个字体名称的。
比如:
@font-face {
font-family: i;
src: url('fonts/Miss.eot') format("eot");
src: local('☺'),
url('fonts/Miss.woff2') format("woff2"),
url('fonts/Miss.woff') format("woff"),
url('fonts/Miss.ttf') format("typetrue");
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: i;
src: url('fonts/04B03.eot') format("eot");
src: local('☺'),
url('fonts/04B03.woff2') format("woff2"),
url('fonts/04B03.woff') format("woff"),
url('fonts/04B03.ttf') format("typetrue");
font-style: normal;
font-weight: 300;
}
这里我们自定义了两款字体,一款是像素体,一款是点字体,然后他们的font-style相同,font-weight的值不同,然后我们再引用字体的时候,只需要加上不同的地方,就会使用对应的字体。
如:
p {
font-family: "i";
font-weight: 300;
}
如图:
文字变成了像素体,然后我们再改一下代码:
p {
font-family: "i";
font-weight: normal;
}
如图:
你看,又变成了点字体。
也就是说,font-face里面的font-weight和font-style并不是说改变字体的粗细和风格,而是一种选择的条件,这种方法可以用于中英混合时,采用不同的字体表现,达到美观的效果,而且十分方便。
注意:
font-style和font-weight想要有以上的效果,他们必须有一项的值是不同的,且font-weight的值不能为:400(默认值),然后需要设置的元素调用字体时输入不同的font-style或font-weight即可!
如果你的font-face只是做了一个自定义,那么你即便引用的元素那里使用了和font-face不一样的font-style或者font-weight,也还是一样直接使用自定义的字体。具体你可以这么理解,不一样的font-style和font-weight只是针对有多个个自定义字体存在,font-family一样时才有效,当只有一个自定义字体,元素上设置的style和weight只是改变字体的风格和粗细,如果引用的字体不支持这两个效果,则无效,元素字体倾斜和粗细不会有任何改变。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
远程字体 详解阿里巴巴矢量字体库css原理
关于自定义字体,我一开始只以为只能本地加载,也就是css里面定义的字体,都只能从本地加载到,但是后来我了解到字符图标,一开始也是照本宣科使用本地字体,这就导致了一个问题,如果服务器网速带宽不够,就会产生字符字体文件未加载完整时,有一个占位字符显示,时间一长就显得极度的难看。然后我使用了阿里矢量字体库里面的字体,是可以直接下载一个css文件,然后本地引用,就可以直接用了,我就奇了怪了,怎么做到的,当然,这个疑问到今天也就完全明白了。首先要明确一点,阿里巴巴的那个css文件虽然写的很多,但是个人测试的时候好像也不支持ie9以下,也不知道是代码问题还是什么,不过现在能兼容ie11就不错了。自定...
