CSS 网页字体最佳实践

CSS 网页字体最佳实践

引用

CSDN

1.

https://m.blog.csdn.net/admans/article/details/139058063

在网页开发中，字体设置是一个既基础又重要的环节。本文将介绍如何通过CSS实现系统字体、兜底字体和Emoji字体的最佳实践配置，以确保不同平台上的良好显示效果。

一般在网页的字体设置中，可以将字体分类三类：

• 系统字体：使用系统自带的字体
• 兜底字体：当系统字体无法正常使用时的备选字体
• Emoji 字体：用于显示网页中的表情符号

为了满足不同平台的需求，并确保Emoji能够获得更好的显示效果（不会被前面的系统字体或兜底字体覆盖），建议使用以下代码配置网页字体：

最佳实践

@font-face {
  font-family: Emoji;
  src: local("Apple Color Emojiji"), local("Segoe UI Emoji"), local("Segoe UI Symbol"), local("Noto Color Emoji");
  unicode-range: U+1F000-1F644, U+203C-3299;
}
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Emoji, Helvetica, Arial, sans-serif;
}

衬线字体

.font-serif {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}

等宽字体

.font-mono {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

解释说明

system-ui 是CSS Fonts Module Level 4 中新增的关键字，用于兼容不同平台版本的浏览器。考虑到不同平台及向后兼容的需求，在macOS和 iOS 上，我们需要使用 -apple-system。

参考链接

• 网页的默认全局字体该如何设置？_哔哩哔哩_bilibili
• CSS 网页字体最佳实践 | 留风博客