CSS中字体相关的小技巧

QAQMiao · 2017-07-07翻译 · 270阅读原文链接

你是否早已厌倦了司空见惯的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 ➡ Show Font Info后，右侧的面板中会显示该字体的PostScript名称及完整名称。

How to find the Full Font and PostScript font names in Font Book

需要的注意的是，一些族关键字是无法覆盖的，例如：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在任何情况下都是可用的。

扩展阅读

你可能想了解更多关于上面列出的Facebook中San Francisco的重命名方式以获取所有的字体weight（包括斜体风格等等）。可以参考System Font CSS项目中的源代码。
当一个local中的重命名字体无法准确匹配weight或风格时，它是否会使用font-synthesis来渲染假的粗体或假的斜体？

参考文档

System Font CSSbyJonathan Neal，一个很棒的关于system-ui的polyfill的项目。尽管我很晚才发现这个项目，但是它比上面提到的Facebook的代码出现更早，甚至可能是这种获取系统字体方法的初始来源，这是我看到最早如此使用的项目。
System Font Stack by Geoff Graham
Using UI System Fonts In Web Design: A Quick Practical Guide by Marcin Wichary
I Left My System Fonts in San Francisco by Craig Hockenberry

版权声明

本译文仅用于学习、研究和交流目的，欢迎非商业转载。转载请注明出处、译者和众成翻译的完整链接。要获取包含以上信息的本文Markdown源文本，请点击这里。

感谢帮助我们改进翻译质量

文章内容对你有帮助吗？
没有帮助不确定有没有帮助有帮助很有帮助非常有帮助
你觉得译者翻译得如何？
非常差勉强凑和还行很好非常好

非常感谢！您的评价已成功提交。

CSS中字体相关的小技巧 - 众成翻译