更新于

自定义字体font-face中的font-style、font-weight详解

发布于 / 分类: CSS / 暂无评论 / 阅读量: 105

自定义字体相信大家都知道是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;
        }

如图:
-75
文字变成了像素体,然后我们再改一下代码:

p {
            font-family:  "i";
            font-weight: normal;
        }

如图:
-75
你看,又变成了点字体。

也就是说,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只是改变字体的风格和粗细,如果引用的字体不支持这两个效果,则无效,元素字体倾斜和粗细不会有任何改变。

暂无评论

设置
配色方案

布局