CSS 的字体系列,按照是否通用可以分为两类:
通用字体系列 - 拥有相似外观的字体系统组合,CSS 中有 5 种通用字体:Serif 衬线字体,Sans-serif 非衬线字体,Monospace 等宽字体(易于对齐,IDE中常见),Cursive 字体,Fantasy 字体。 特定字体系列 - 具体的字体系列(比如宋体,微软雅黑,苹方字体)按照有无衬线可以分为两类:
Serif 衬线字体,在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。易读性比较高,适合用于正文。包括宋体(微软自带中易宋体 SimSun,由于含有过细笔画的文字和笔画粗细差异较大的字体,适合印刷而非屏幕显示),Georgia,Times New Roman。 Sans-serif 非衬线字体,没有这些额外的装饰,而且笔画的粗细差不多。醒目,适合做标题。包括黑体(SimHei),微软雅黑,Arial,Tahoma,Verdana。 2. web 开发的注意事项 1. 在所有 font-family 规则中最后提供一个通用字体系列这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。比如:font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\\5b8b\4f53",sans-serif ,
知乎的标题和正文统一用非衬线字体:font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",Lato,proxima-nova,sans-serif。
为了提高兼容性,保证在不支持中文的平台上也可以正常使用,可以将中文名称的字体转换为Unicode编码。
中文 英文 Unicode 黑体 SimHei \9ED1\4F53 宋体 SimSun \5B8B\4F53 微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 4. 在 html 中增加 lang 标签,显式声明网页所用语言<html lang="zh-CN">
网页所用语言明确,有利于加载对应的字体等。
网页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn” 参考这里
font-family: -apple-system, "PingFang SC"; :调用苹方字体。 font-family: sans-serif; 配合 lang 属性:调用到各个地区的苹方字体(<html lang="zh-CN"> 调简体中文的平方字体)。 font-family: Helvetica; 或者 sans-serif 且不加 lang 属性,可以调用苹方的 Light、Regular 和 Bold 字重。 font-family: "Helvetica Neue"; 可以调用苹方的所有字重。 3. 安卓
默认字体 Roboto,中文字体有 Segoe UI,思源黑体 (Noto Sans CJK)
知乎在移动端的字体是:font-family: "Helvetica Neue",Helvetica,Roboto,"Segoe UI",Arial,sans-serif; 前两个配合苹果,中间两个配合安卓,最后一个确保万无一失。