专栏首页京程一灯CSS中字体相关的小技巧

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名称及完整名称。

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


往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



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

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-11-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS 层叠相关知识指北

    亲爱的观众老爷们大家好~我发现我写文章都是因为工作碰到问题才写,什么探索最前沿的最讨厌了(其实是力有所不及)!言归正传,最近碰到的问题是这个:准备开发一个平台,...

    疯狂的技术宅
  • 论CSS中可使用的font-size的长度单位

    本文由Tom Hodgins审阅。感谢SitePointer的编审们,帮助SitePoint提供最优质的内容给读者!

    疯狂的技术宅
  • JavaScript引擎是如何工作的?从调用栈到Promise你需要知道的一切[每日前端夜话0x6B]

    JavaScript Engines: How Do They Even Work?

    疯狂的技术宅
  • SpringMVC接收数组

    后台写@RequestParam("img_array[]") String[] img_array

    試毅-思伟
  • 前端学习 第2周 第4天

    Joel
  • 图像处理: 设计 动态高斯滤波

    在做项目的过程中,我发现如果根据 像素点 相对整张图片 的位置 设计 不同的 滤波核大小(即参数 ksize),就可以灵活地对整张图片实现 动态 高斯滤波 了。

    JNingWei
  • Python_鸡兔同笼

    ''' 问题:鸡兔同笼 用户输入 h f 已知:同一个笼子里 鸡兔共h只 总脚数f只 1求解 2循环枚举 '''

    瑞新
  • Python IF 条件判断

    其中"判断条件"成立时(非零),则执行后面的语句,而执行内容可以多行,以缩进来区分表示同一范围。

    py3study
  • ASCIIMathML技术简介~

    ASCIIMathML.js是一种将ASCII符号翻译成直观的MathML(HTML版本)的开源JavaScript脚本。

    Enjoy233
  • 实在是妙啊!Java中强软虚弱引用,居然还能这样去操作

    ThreadLocal 在什么情况下可能发生内存泄漏?如果你想清楚这个问题的来龙去脉,看源码是必不可少的,看了源码之后你发现, ThreadLocal 中用到 ...

    Java程序猿阿谷

扫码关注云+社区

领取腾讯云代金券