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

  • 系统字体:使用系统自带的字体
  • 兜底字体:当系统字体无法正常使用,而兜底的字体
  • 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. YC-Framework版本更新:V1.0.6

    分布式微服务框架:YC-Framework版本更新V1.0.6!!! 本文主要内容: V1.0.6版本更新主要内容 V1.0.6版本更新主要内容介绍 一.V1.0.6版本更新主要内容 1.系统例子覆盖 ...

  2. Docker操作容器2

    Docker操作容器1:https://blog.csdn.net/Kevinnsm/article/details/ 1.如何更改docker容器中的配置文件(如nginx容器中的nginx.con ...

  3. windows安装rabbitmq踩坑实录

    最近学习springcloud消息总线需要用到rabbitmq,然后安装的时候踩了一些坑,记录如下: 首先安装rabbitmq之前需要先安装erlang,因为rabbitmq服务端使用erlang写的 ...

  4. 2021.11.03 P2886 [USACO07NOV]Cow Relays G(矩阵+floyed)

    2021.11.03 P2886 [USACO07NOV]Cow Relays G(矩阵+floyed) [P2886 USACO07NOV]Cow Relays G - 洛谷 | 计算机科学教育新生 ...

  5. 2021.07.18 P2290 树的计数(prufer序列、组合数学)

    2021.07.18 P2290 树的计数(prufer序列.组合数学) [P2290 HNOI2004]树的计数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1.pru ...

  6. UnrealEngine创建自定义资产类型

    导语 这篇文章记录了将UObject实例保存在Asset文件的方法,用这个方法可以将自定义的UObject数据序列化保存到文件,可以用于自定义UE资源类型. 创建UObject类 这一步比较简单,按照 ...

  7. Not Adding - 题解【数学,枚举】

    题面 原题链接(CF1627D) You have an array \(a_1,a_2,-,a_n\) consisting of \(n\) distinct integers. You are ...

  8. java中的stream是啥?

    函数式编程的执行是惰性的,按顺序真正执行的时候才会执行相应的代码.方法: 函数式编程是安全的,用的是monad架构 1 public class StreamTest { 2 3 public sta ...

  9. python学习-Day22

    目录 今日内容详细 hashlib加密模块 什么是加密 加密算法 加密的使用 基本使用 指定算法(md5) 将明文数据传递给算法对象 获取加密之后的密文数据 加密补充 加盐处理 动态加盐 加密应用场景 ...

  10. XCTF练习题---MISC---倒立屋

    XCTF练习题---MISC---倒立屋 flag:flag{9102_cCsI} 解题步骤: 1.观察题目,下载附件 2.打开发现是个倒立的屋子,并没有发现啥东西,拿StegSolve看看 3.查了 ...