字体
本节来源张鑫旭老师的视频讲解:https://www.douyin.com/video/7484167546564873487。
衬线、无衬线和等宽。
系统字体、兜底字体和Emoji字体。
@font-face {font-family: Emoji;src: local("Apple Color Emoji"),local("Segoe UI Emoji"),local("Segoe UI Symbol"),local("Noto Color Emoji");unicode-range: U+1F000-1F644, U+203C-3299;
}:root {--text-font: system-ui, -apple-system, Segoe UI, Roboto, Emoji, Helvetica, Arial, sans-serif;--serif-font: Georgia, Cambria, "Times new Roman", Times, serif;--mono-font: Menlo, Monaco, Consolas, "Liberation mono", "Courier new", monospace;
}
system-ui是新特性,对现代浏览器的支持很好。-apple-system对Safari支持不好。
windows vista+支持Segoe UI;macOS/ios支持Helvetica;老windows支持Arial;Android支持Roboto。
Emoji字体用于给Emoji上色,但是Helvetica和Arial中包含了部分Emoji Unicode,所以需要将Emoji置于它两前面。