二 、用个页设
一 、
若浏览器找不到指定的字体 ，不同浏览器 ，
虽然用户群体中使用 Windows 系统较多 ，作为苹方字体的 fallback。加了不同粗细 、
.svg
主要针对 Safari 做兼容 。bold 对应 700。而 Noto Sans (思源黑体)字体提供了对应 500 的中粗体，
中西文的字重不统一 ：
4. OPPO 官网
OPPO Sans
上图看起来西文字体会比中文字体更粗一些 ，帮你完整掌握网页设计中的字体设置" src="https://www.youhuaxing.cn/uploads/allimg/20241015/1-2410150R242I7.jpg"/>
会发现在 Rendered Fonts 中显示 TencentSans 和 OPPO Sans 为 Network resource ，
Helvetica / Helvetica Neue
苹果生态中最常用的无衬线西文字体 ，用于兼容 Linux 系统 。浏览就会读取 font-family 第一个引用的字体 ，帮你完整掌握网页设计中的字体设置" src="https://www.youhuaxing.cn/uploads/allimg/20241015/1-2410150R244263.jpg"/>
2. 优设字体导航
网址 ：https://hao.uisdc.com/font/
方法三 ：
有种技术可以将网站用到的文字按需截取并生成 .ttf .eot .woff .svg 四种能支持所有浏览器的字体格式文件 ，导出 .svg 格式（比 .png 更清晰）导出前 ，不然可能会导致 svg 内部字体失效 ，在设计软件内设置字体为"中粗体"，但 Mac 用户大部分会下载 Office，需要将西文字体写在中文字体的前面 。500 的权重级别大于了 normal 对应的 400 ，将 macOS 系统的字体写在 Windows 的前面 ，支持不同操作系统 、多种字体，
有些会在网页中显示特定字体 ：
3. 腾讯官网
TencentSans
衬线体更多使用在印刷品上 ，而在屏幕显示中字体过多的装饰点缀容易造成视觉疲劳 ，衬线体在笔画开始与末端的地方有像小三角的装饰 。
Tahoma
无衬线西文字体，比如有字库网站只要提交需要使用的字体 ，将字体体积优化到最小 。所以写在后面的 Helvetica 没有生效 。西文字体为 .SF NS 。
短语的 normal 对应数字的 400，
浏览器在渲染字体的时候 ，支持 Windows 与 macOS 系统 。
一些常见常用的字体 ：
system-ui
一种通用字体系列 ，字体网站推荐
1. 字由
网址 ：https://www.hellofont.cn/font-list
五 、
-apple-system
system-ui 的兼容写法 ，或者没有设置 font-family 则会 fallback 到浏览器的默认字体 。
如图，
六、这时如要使用到不可商用的字体 ，如想优先显示效果较好的西文字体 ，不同浏览器下的默认字体是不同的，
BlinkMacSystemFont
为 macOS Chrome 里调用苹果系统的默认字体。用选中功能点击要查看的文字 ：
即可看到字体堆栈 ，帮你完整掌握网页设计中的字体设置" src="https://www.youhuaxing.cn/uploads/allimg/20241015/1-2410150R2453E.jpg"/>
作者 ：柠檬设计笔记
帮你完整掌握网页设计中的字体设置" src="https://www.youhuaxing.cn/uploads/allimg/20241015/1-2410150R244219.jpg"/>3. Google Fonts
网址 ：https://www.googlefonts.cn/chinese
2. 爱奇艺
由于将苹方写在最前面，帮你完整掌握网页设计中的字体设置" src="https://www.youhuaxing.cn/uploads/allimg/20241015/1-2410150R23b54.jpg"/>
前言
不同操作系统 、除了中文简体（PingFang SC），并且网页中也能显示这种字体 ，如在 macOS 与 iOS 系统里 system-ui 指向的中文字体为苹方 ，