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

  • 系统字体:使用系统自带的字体
  • 兜底字体:当系统字体无法正常使用,而兜底的字体
  • 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, Rototo, 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 – Generic font families 新增的关键字,兼容不同平台版本浏览器。

考虑到不同平台及向后兼容,在 macOS 和 iOS 上,我们需要使用 -apple-system

参考链接

  1. https://www.bilibili.com/video/BV1b54y1Z7pu
  2. CSS 网页字体最佳实践

CSS 网页字体最佳实践的更多相关文章

  1. css编写规范最佳实践

    最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中.但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了.本文通过三个方面,总结出CSS编写 ...

  2. http网页性能最佳实践

    你愿意为打开一个网页等待多长时间?我一秒也不愿意等.但是事实上大多数网站在响应速度方面都让人失望.现在越来越多的人开始建立自己的网站,博客,你的网页响应速度如何呢?在这篇文章中我们来介绍一下提高网页性 ...

  3. SMACSS:一个关于CSS的最佳实践-1.Overview

    什么是SMACSS? SMACSS(发音"smacks"),全称Scalable and Modular Architecture for CSS.顾名思义,SMACSS是一个可扩 ...

  4. Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码

    前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...

  5. 详解CSS网页布局中默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

  6. CSS非ASCII字符最佳实践

    问题场景 在写样式时经常需要用到非ASCII字符的属性值,如下: ? 1 2 3 4 5 6 7 8 9 10 11 .hot_list .sign_discount:before {    cont ...

  7. 【WEB前端开发最佳实践系列】CSS篇

    一.有效组织CSS代码 规划组织CSS代码:组织CSS代码文件,所有的CSS都可以分为2类,通用类和业务类.代码的组织应该把通用类和业务类的代码放在不同的目录中. 模块内部的另一样式规则:样式声明的顺 ...

  8. Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些

    前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...

  9. CSS media query应用中的层叠特性使用最佳实践

    media query是css3规范中引入的,它提供了一种responsive design的基础机制:浏览器在不同size的设备中将以不同样式展现网页,这就给一个网页能够适应不同device一种可能 ...

随机推荐

  1. Java---变量和基本数据类型

    变量 在Java中,变量分为两种:基本类型的变量和引用类型的变量. 在Java中变量必须先定义后使用,在定义变量的时候可以给它一个初始值.如果不写初始值,默认为0或空. 变量的一个重要特点是可以重新赋 ...

  2. redis5.0.0集群搭建【实战经历】

    redis集群搭建 作者:陈土锋 时间:2020年6月2日 目录 一.环境介绍... 1 1.机器准备... 1 2.关闭防护墙和selinux. 1 3.时间同步... 1 二.Redis Clus ...

  3. 从乘法求导法则到BPTT算法

    本文为手稿,旨在搞清楚为什么BPTT算法会多路反向求导,而不是一个感性的认识. 假设我们要对E3求导(上图中的L3),那么则有: 所以S2是W的函数,也就是说,我们不能说: 因为WS2 = WS2(w ...

  4. 算法基础③--DFS解决迷宫问题入门

    迷宫问题 通过深度优先搜索(DFS)方法实现. 迷宫问题一 一天蒜头君掉进了一个迷宫里面,蒜头君想逃出去,可怜的蒜头君连迷宫是否有能逃出去的路都不知道. 看在蒜头君这么可怜的份上,就请聪明的你告诉蒜头 ...

  5. js 前端实现下拉刷新 上拉加载

    效果 css html,body{ height:100%; // 其他界面未设置html 无法监听scroll } /* 下拉刷新 */ .refresh-loading { transition: ...

  6. kali2021.4a搭建pwn环境

    最近电脑重装系统(吐槽一下,win11真的一言难尽),顺便在虚拟机装了最新版本的KaliLinux,顺带着搭建一下PWN环境.总的来说这次搭建PWN环境问题不大,按照之前安装的步骤,整个过程还算是比较 ...

  7. 『现学现忘』Git对象 — 17、Commit对象

    目录 1.Commit对象介绍 2.Commit对象说明 3.本地库中对象之间的关系 4.总结 5.练习 6.本文用到的命令总结 1.Commit对象介绍 现在来介绍最后一种Git对象commit对象 ...

  8. [AcWing 798] 差分矩阵

    点击查看代码 #include<iostream> using namespace std; const int N = 1e3 + 10; int a[N][N], b[N][N]; v ...

  9. 劳动节快乐!手写个核心价值观编码工具 - Python实现

    前言 今天是五一劳动节,祝各位无产阶级劳动者节日快乐! 然后来整活分享一些有趣的东西~ 这个小工具是我大学时做着玩的,对于各位接班人来说,12个词的核心价值观这东西,大家都非常熟悉了,这工具可以实现将 ...

  10. Vue图片浏览组件v-viewer使用

    简单介绍v-viewer的两种使用方法: Demo 安装依赖: npm install v-viewer --save 全局引入 import Viewer from 'v-viewer' impor ...