CSS中字体相关的小技巧

你是否早已厌倦了司空见惯的Helvetica字体？想让你的网页别有一番趣味？或是想避免和同事讨论这些琐事？那么我想你需要看看下面这些代码。在项目中添加这样一小块代码后，将在全局中将Helvetica字体替换（alias）为Comic Sans MS字体（或是Chalkboard SE字体，取决于浏览器支持）。(是的，我知道我最近写了一篇博客关于字体平滑渲染（anti-aliasing），但除了单词相似外它们并不是一回事)

@font-face {
  font-family: Helvetica;
  src: local(Comic Sans MS), local(Chalkboard SE);
}

如果你在Twitter上关注我了，早在2015年就可能看到这个技巧了，额，也许，是在2014年。

让我们仔细看看规范：

开发者使用的字体名如果与用户使用环境中已有的某个字体名字相同，在使用样式表的文档中会有效覆盖底层字体。这使得网页开发者可以自由的选择字体名称，而毋庸担心与给定用户环境中存在的字体名产生冲突。

规范中如此定义是因为选择出与每个用户环境不产生冲突的名字这件事想想就十分可怕！

合法的local()值

local()的合法值都有什么？如果你觉得你可以添加任意一个 font-family名字，那你错了。我们再次参考下规范：

local中放入的是一串特定格式的字符串，这串字符串用于唯一标识庞大字体族中的一套字体。 对于OpenType类型和TrueType类型的字体，这个字符串分别是用于匹配本地可用字体名称表中的Postscript名称或是完整字体名称。当使用多种平台和字体时，开发者应该同时包含这两种名称以确保跨平台时可以进行正确匹配。

好的，那么我们应当在 local()中放入一个PostScript名称或是完整字体名称。那现在要在哪里获取这个名称？

如果你使用的是Mac操作系统，打开默认的字体浏览器，Font Book，然后选择一个字体。在菜单栏中，选择 View➡ShowFontInfo后，右侧的面板中会显示该字体的PostScript名称及完整名称。

需要的注意的是，一些族关键字是无法覆盖的，例如： serif， sans-serif， cursive， fantasy以及 monospace。执意在 font-family属性中使用这些值也可能是生效的，毕竟 font-family:"serif"是不同于 font-family:serif的。

Facebook的San Francisco技巧

我时不时随意查看一下我访问的不同网站是否在使用@font-face。我偶然发现Facebook正在使用这个很聪明的技巧。我们来看一下：

@font-face {
  font-family: 'San Francisco';
  font-weight: 300;
  src: local('-apple-system')
}

@font-face {
  font-family: 'San Francisco';
  font-weight: 400;
  src: local('.SFNSText-Regular')
}

@font-face {
  font-family: 'San Francisco';
  font-weight: 500;
  src: local('-apple-system')
}

@font-face {
  font-family: 'San Francisco';
  font-weight: 600;
  src: local('-apple-system')
}

@font-face {
  font-family: 'San Francisco';
  font-weight: 700;
  src: local('.SFNSText-Semibold')
}

@font-face {
  font-family: 'San Francisco';
  font-weight: 800;
  src: local('-apple-system')
}

#facebook .
-kb.sf {
  font-family: San Francisco, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
}

是不是超棒！他们通过@font-face重命名了一系列 local，加入不同 font-weight的本地字体源来简化 font-family属性的值。接下来让我们通过一些简洁明了的demo和测试用例来更好的理解一下

更新：我之后不久发现System Font CSS项目在2015年使用了这种方法，好像早于Facebook的实现

实例演示

注：下面的demo 的回退方案被设为 fantasy字体。因此如果你看到了 fantasy字体，说明重命名没有生效。在苹果的产品中（San Francisco应当是可用的）fantasy 会被渲染为Papyrus。

-apple-system

@font-face {
  font-family: San Francisco Apple System;
  src: local(-apple-system);
}

将local(-apple-system)重命名为San Francisco在Safari移动端和桌面端得到支持，在Chrome和Firefox（截止至54）中尚未支持。

BlinkMacSystemFont

@font-face {
  font-family: San Francisco Blink;
  src: local(BlinkMacSystemFont);
}

将 local(BlinkMacSystemFont)重命名为San Francisco在Chrome，Firefox（截止至54），Safari（截止至10.1）中尚未支持。

PostScript名称

@font-face {
  font-family: San Francisco PostScript Name;
  src: local(.SFNSText-Regular);
}

将 local(.SFNSText-Regular)重命名为San Francisco在Chrome，Firefox（截止至54），Safari（截止至10.1）中尚未支持。

@font-face {
  font-family: San Francisco PostScript Name Quoted;
  src: local('.SFNSText-Regular');
}

将 local('.SFNSText-Regular')重命名为San Francisco在Firefox，Safari桌面端得到支持，在Chrome，Safari移动端中尚未支持。

system-ui

system-ui的值的标准化工作正在进行，有希望很快出现在Can I Use上。更好的消息是，Chrome已经着手于这方面工作了。

无需重命名， font-family:system-ui的使用已经得到了Chrome的支持，在Firefox（截止至54），Safari（截止至10.1）中尚未支持。

同时Chrome的实现也支持将它作为一个命名源使用！考虑到 BlinkMacSystemFont并不能作为一个命名源，因此 system-ui可以做到这一点让人十分开心。

@font-face {
  font-family: San Francisco System UI;
  src: local(system-ui);
}

将 local(system-ui)重命名为San Francisco在Chrome中得到支持，在Firefox（截止至54），Safari（截止至10.1）中尚未支持。

最后一步，简化代码

结合以上测试用例，完成一个简化版本的San Francisco重命名例子，使其可以在Chrome，Safari桌面端和移动端，Firefox中正常工作。这样之后就无需使用 BlinkMacSystemFont了。同样也不再需要在你的CSS中为 font-family属性赋其他杂乱的值了。简单而有效！

@font-face {
  font-family: My San Francisco Alias;
  src: local(system-ui), local(-apple-system), local('.SFNSText-Regular');
}
p {
  font-family: My San Francisco Alias, fantasy;
}

这么定义后，San Francisco在任何情况下都是可用的。

小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。