如何优雅地定义 font-family?

01-15

font-family 如何定义才能在所有的平台下都优雅的展示?

根据每个平台不同字体的品质和产品本身的需求，尽可能精细地指定 font-family fallback 顺序，避免落入浏览器和操作系统的默认配置，这是一种「优雅」的流派。已有的答案中有两种方式：

1. @黄玄提到的写长长的 font-family 来 fallback；

2. @阿树提到的用 @font-face 来 fallback。

多数情况下效果应该是接近的，但是用 @font-face 定义「虚拟字体」，有一个好处，可以自行定义字体的 font-style、font-weight 等属性，进而解决一些实际遇到的问题。之前的一次 CSSConf 上听豆瓣阅读的 @灭灭同学介绍如何对同一段 font-style: italic 的中西文混排文字设置仅西文斜体（中文字体一般没有专门的斜体版本，浏览器合成的 oblique 样式不仅丑，而且小尺寸时在低分屏下难以辨识）：把斜体西文字体和正体（相对于斜体，非简体）中文字体定义到同一个 font-style: italic 的 @font-face 中来使用，感觉相当巧妙。

@font-face 里还支持通过 unicode-range 来针对字符进行字体的配置，对于强迫症晚期来说更是福音（XX 字体里的逗号好难看，我要换了它）。@Chen Yijun 的漢字標準格式不仅使用了 @font-face 来以「书体」定义了字体族，也用 unicode-range 来自定义了汉字标点符号的字体。

除了强迫症的「超强控制」配置方法以外，也有人会觉得根据用户配置、平台默认字体来显示，完全「放任自流」也是另一种「优雅」。比如 Google Search 的 font-family 就是 arial, sans-serif（当然也可能是基于省流量的考虑，这就不得而知了）。

最后，还有一种，不管你啥平台啥浏览器，请都给我用我的字体，你没有我发给你。但是这个得有字体版权，所以一般人做不了。只有一些注重设计细节而且拥有字体版权的人可以这么做（比如 Apple）。

到底什么算优雅，我也说不好，各有所爱吧。

谢邀，

这是我博客（Huxpro/huxpro.github.io: My Blog / Jekyll T...）的 font-family ，可以供你参考：

// System Font // https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/ -apple-system, // OSX ^10.11 iOS ^9 San Francisco 苹方


// English First

"Helvetica Neue",         // OSX

"Arial",                  // Win "Helvetica"

//" Segoe UI",            // Win ^8

// Chinese Fallback "PingFang SC", // OSX ^10.11 iOS ^9 苹方（华康信凭黑） "Hiragino Sans GB", // OSX ^10.6 冬青黑体 "STHeiti", // OSX &<10.6 iOS &<9 华文黑体 "Microsoft YaHei", // Win 微软雅黑 "Microsoft JhengHei", // Win 微软正黑 "Source Han Sans SC", // SourceHan - begin 思源黑体 "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", // SourceHan - end "WenQuanYi Micro Hei", // Linux 文泉驿微米黑 SimSun, // Win old 中易宋体 sans-serif; // System Fallback /* 知乎的代码高亮真是不忍吐槽*/

优雅的 font-familly 大概满足两点：

1、字体风格一致

2、字体序列恰当

字体风格不一致的问题蛮常见，比如简书常被诟病的楷体标题搭配黑体正文，又或者一些个人博客使用衬线体西文搭配黑体中文等等。

字体序列的问题其实一般并不常见，最糟糕的情况就是先定义中文，再定义西文，中文那套自带西文字体会让你感到难过，其次就像在 OS X 系统上将「华文黑体」定义在「冬青黑」或「苹方」之前，抛开个人喜好，普遍场景下后两者字体较前者更优。

这是我认为最优雅的 font-family:

font-family: sans-serif;

一般我常用的 font-family :

Rhythm/font-face.less at master · Aaaaaashu/Rhythm · GitHub

// 黑体 @font-face { font-family: "Rhythm Heiti"; src: local("PingFang SC Light"), local("PingFang TC Light"), local("PingFang-SC-Light"), local("PingFang-TC-Light"), local("PingFang SC"), local("PingFang TC"),


    local("Hiragino Sans GB"),
    local("Lantinghei TC Extralight"),

    local("Lantinghei SC Extralight"),

    local(FZLTXHB--B51-0),

    local(FZLTZHK--GBK1-0),
    local("Heiti SC Light"),

    local(STHeitiSC-Light),

    local("Heiti SC"),

    local("Heiti TC Light"),

    local(STHeitiTC-Light),

    local("Heiti TC"),
    local("Microsoft Yahei"),

    local("Microsoft Jhenghei"),
    local("Noto Sans CJK KR"),

    local("Noto Sans CJK JP"),

    local("Noto Sans CJK SC"),

    local("Noto Sans CJK TC"),

    local("Source Han Sans K"),

    local("Source Han Sans KR"),

    local("Source Han Sans JP"),

    local("Source Han Sans CN"),

    local("Source Han Sans HK"),

    local("Source Han Sans TW"),

    local("Source Han Sans TWHK"),

    local("Droid Sans Fallback")

  ;

}
// 宋体

@font-face {

  font-family: "Rhythm Songti";

  src:

    local("Songti SC Regular"),

    local(STSongti-SC-Regular),

    local("Songti SC"),

    local("Songti TC Regular"),

    local(STSongti-TC-Regular),

    local("Songti TC"),
    local(STSong),

    local("Lisong Pro"),
    local(SimSun),

    local(PMingLiU)

  ;

}
// 楷体

@font-face {

  font-family: "Rhythm Cursive";

  src:

    local("Kaiti TC Regular"),

    local(STKaiTi-TC-Regular),

    local("Kaiti TC"),

    local("Kaiti SC"),

    local(STKaiti),
    local(BiauKai),

    local("標楷體"),

    local(DFKaiShu-SB-Estd-BF),
    local(Kaiti),

    local(DFKai-SB)

  ;

}

// 意大利衬线体 @font-face { font-family: "Rhythm Italic Serif"; src: local("Georgia Italic"), local("Times New Roman Italic"), local(Georgia-Italic), local(TimesNewRomanPS-ItalicMT), local(Times-Italic) ; }

网页字体设置你了解吗？

携程UED有一篇文章分了三种情况设置字体“移动端”、“pc端(含Mac)”、“移动端和PC端”；

要优雅请直接上 webfont 谢谢。

为了兼容不同艺术字体在移动端显示，现在采用是通过后台截取图片方式来渲染。暂时没有找到合适的方式。