苹方字体

html-css019

苹方字体,第1张

苹方提供了六个字重,font-family 定义如下:

苹方-简 常规体

font-family: PingFangSC-Regular, sans-serif

苹方-简 极细体

font-family: PingFangSC-Ultralight, sans-serif

苹方-简 细体

font-family: PingFangSC-Light, sans-serif

苹方-简 纤细体

font-family: PingFangSC-Thin, sans-serif

苹方-简 中黑体

font-family: PingFangSC-Medium, sans-serif

苹方-简 中粗体

font-family: PingFangSC-Semibold, sans-serif

苹方除了简体的:苹方-简(PingFang SC),还为繁体用户提供有:苹方-繁(PingFang TC) ,苹方-港(PingFang HK)

苹方-繁 的 CSS font-family 使用:

font-family: PingFangTC-Regular, sans-serif

font-family: PingFangTC-Ultralight, sans-serif

font-family: PingFangTC-Light, sans-serif

font-family: PingFangTC-Thin, sans-serif

font-family: PingFangTC-Medium, sans-serif

font-family: PingFangTC-Semibold, sans-serif

苹方-港 的 CSS font-family 使用:

font-family: PingFangHK-Regular, sans-serif

font-family: PingFangHK-Ultralight, sans-serif

font-family: PingFangHK-Light, sans-serif

font-family: PingFangHK-Thin, sans-serif

font-family: PingFangHK-Medium, sans-serif

font-family: PingFangHK-Semibold, sans-serif

从 MDN 上可以看到,当元素的一个继承属性 (inherited property)没有指定值时,则取父元素的同属性的计算值(computed value)。

比如 color 属性就是继承属性,给父级元素设置了 color ,则子元素会继承。

CSS 属性 font-family 允许您通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体。

属性 font-family 列举一个或多个由逗号隔开的字体族,语法如下:

font-family 是一个继承属性,比如,我在child元素的父元素.parent 上添加 font-family: serif,子元素也会继承它的属性值。

但是,我们给子元素的 font-family 随便设置一个值 unknow,这实际上是一个无效的字体。

浏览器识别不出来这是一个无效的值,计算值的结果还是 unknown,但实际效果则是直接降级到浏览器的默认值。此时并不会即成父级元素设置的值,这跟我们的认知还是不一样的。

然而,假如我们设置子元素的样式如下,即在 test 之后再设置一个字体 Gill Sans ,

就会降级到 Gill Sans 了。

我们通常会在全局样式中设置通用字体,以保证字体样式在不同设备上呈现时,至少有一个最基本的字体样式可以降级,而不是直接降级为系统默认字体。

但是当我们为某些特定元素设置字体样式时,比如设计希望在苹果设备上呈现出 PingFang SC 字体样式。如果理所当然的设定为,

那么会覆盖全局设置的通用字体样式,而如果该设备上没有苹方字体时,就会降级到系统默认字体,而不是设置的全局通用字体。

因此当UI有特殊字体样式要求时,请务必在设置字体样式时,除了特殊字体的声明,也要保证在特殊字体后边添加用于降级的通用字体,比如:

否则当用户在系统上设置了奇怪的默认字体时,您的UI设计稿就会也随之变得奇奇怪怪。

font-family 如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family

属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

因为你第一个字体已经被调用了,所以不会调用第二个字体,如果需要中文和英文分开显示不同的字体,你只能给中文和英文分别指定字体了。

<style>

    .f_cn{

        font-family:'苹方'

    }

    .f_en{

        font-family:'San Francisco'

    }

</style>

<p><span class="f_cn">中文</span<span class="f_en">english</span></p>