[前端] 网络页面中的字体
发布网友
发布时间：2024-10-04 23:38
共1个回答
热心网友
时间：2024-11-12 13:34
我们常见的设置方式如图，涉及的细节如下：
通用字体族及明细
在w3关于css fonts module level的当前版本（v4）中，主要有以下字体（暂不列出优化版的如ui-serif等呈ui-xxx形字体）。① 衬线（serif）字体：笔画粗细不一，有明显笔锋。装饰性强。如宋体。② 无衬线（sans-serif）字体：笔画粗细一致，无笔锋。阅读性好，适用于文章正文（新媒体时代屏幕上的显示）。如微软雅黑。常写到最末托底。
③ 等宽字体monospace（常用于编辑器及技术文章代码块中，主要针对西文字体）、emoji、梦幻字体fantasy、草书cursive等。④ system-ui，由此引申的浏览器默认字体和系统默认字体，请看第三部分。
system-ui
① system-ui, -apple-system, BlinkMacSystemFont
system-ui会选择与当前操作系统相匹配的字体，但其仅在各个平台的chrome 56+被支持。像macOS的chrome53-55，需要BlinkMacSystemFont字体；macOS、iOS的其他浏览器下，需要-apple-system字体。这里我们关注下在默认适配时，实际渲染的字体——这和系统字体是相匹配的。要明确的是，默认字体分为浏览器默认字体和系统默认字体。
android系统下中文通常为Noto Sans (思源黑体)，西文字体为Roboto。windows系统上一般为微软雅黑（Microsoft YaHei UI），但是在部分windows系统上的字体会出现问题，所以windows上不建议使用system-ui。
注意点
① 版权问题。免费可商用的有思源黑体（Adobe和google联合开发）等。② 字体设置一般先设置西文字体，后设置中文。因为中文字体一般包含对数字、英文字母的设置，先设置中文会直接导致所有的文字均采用对应的中文字体包。
在Windows操作系统上，常见的sans-serif字体包括Arial、Helvetica和Verdana；在Mac操作系统上，常见的sans-serif字体包括Helvetica和Arial。windows的最佳西文展示为Segoe UI字体。不同平台的emoji表情符号可以添加到sans-serif后。具体的设置示例参考【参考文档1】。各种场景下的字体形式建议查询下再决定，如MDN中font-family对于fangsong字体的介绍是”This style is often used for government documents.“。
