CSS 系统字体堆栈参考

网站上的字体很容易成为浏览器在显示页面最终外观和形式之前必须下载的总捆绑大小的一部分。此外,我们还需要担心各种问题,比如臭名昭著的未样式文本闪烁(FOUT)。可以说,整个问题的一部分已经得到解决,多亏了font-display属性。

另外,网站上的文本几乎总是最重要的部分,因此我们不希望出现外观不佳或难以阅读的文本。那么,一个精明的网页设计师应该怎么做才能既满足性能又满足外观和感觉呢?

一个解决方案是实际上使用用户设备上已安装的字体。过去,这不是一个非常优雅的解决方案,因为一些流行的系统没有内置美丽的字体。然而,现在情况不同了,每个主要操作系统都内置了一个看起来和阅读起来都很好的无衬线系统字体。

因此,诀窍就是将所有这些默认系统字体名称作为font-family属性的值提供给应该使用系统字体的元素。然后浏览器将使用它在当前系统上找到的第一个字体。请记住,这也意味着文本将根据它所在的系统而有所不同。然而,这并不一定是件坏事,因为文本将感觉与其所在的操作系统相符。

无衬线系统字体堆栈

话不多说,这就是在这个网站上使用的系统字体堆栈的版本:

body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif;
}

这个堆栈与WordPress使用的堆栈相同,并且到目前为止在Alligator.io的内容上运行得相当不错。在这个网站上,标题使用可变字体Recursive,以增加一些风格,但内容本身使用系统字体。

如果你感兴趣,这里是这些字体/关键字的详细说明:

  • -apple-system和BlinkMacSystemFont:用于引用苹果设备上的系统字体的关键字,通常是San Francisco或Helvetica Neue,具体取决于操作系统的版本。在一些更新的浏览器中,现在可以使用关键字system-ui来执行这两个关键字的工作。
  • Segoe UI:用于Windows系统。
  • Roboto:Android设备的系统字体。
  • Oxygen-Sans:使用KDE的Linux系统。
  • Ubuntu:Ubuntu Linux
  • Cantarell:使用Gnome的Linux系统(不包括Ubuntu)。
  • Helvetica Neue:许多系统(尤其是苹果系统)上都有的常见备用字体,以防前面的字体都失败了。
  • sans-serif:如果一切都失败了,回退到默认的浏览器无衬线字体。通常不是最令人愉悦的结果,这就是为什么我们不只使用font-family: sans-serif

和生活中的大多数事情一样,系统字体堆栈有许多不同的风格,每个都略有不同。例如,这是GitHub使用的堆栈。

等宽系统字体堆栈

虽然没有基于衬线字体的系统字体堆栈,但有一个等宽字体的堆栈,对于代码片段等非常有用。这是Bootstrap v4使用的堆栈(GitHub也使用了一个非常相似的版本):

code {font-family: SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace;
}

使用@font-face的系统字体

如果你厌倦了在CSS的多个地方重复相同的多个字体名称的字符串,可以在这篇CSS-Tricks文章中找到一个技巧,允许利用@font-face规则来定义一个单一名称,该名称引用整个堆栈。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/736005.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【实战项目】Boost搜索引擎项目

目录 1. 项目的相关背景 2. 搜索引擎的相关宏观原理 3. 搜索引擎技术栈和项目环境 4. 正排索引 vs 倒排索引 - 搜索引擎具体原理 4.1 正排索引 4.2 目标文档进行分词 4.3 倒排索引 4.4 模拟一次查找的过程: 5. 编写数据去标签与数据清洗的模块 Parser 5.1…

【Docker】apache 容器化部署

Apache环境标准软件基于Bitnami apache 构建。当前版本为2.4.58 你可以通过轻云UC部署工具直接安装部署,也可以手动按如下文档操作,该项目已经全面开源,可以从如下环境获取 配置文件地址: https://gitee.com/qingplus/qingcloud-platform Q…

《操作系统真相还原》读书笔记八:获取物理内存容量以及本书源代码

编写mbr.S汇编代码 ;LOADER_BASE_ADDR equ 0x900 ;LOADER_START_SECTOR equ 0x2 %include "boot.inc"SECTION MBR vstart0x7c00mov ax,csmov ds,axmov es,axmov ss,axmov fs,axmov sp,0x7c00mov ax,0xb800mov gs,axmov ax,0x0600mov bx,0x0700mov cx,0mov dx, 184fh…

力扣图论篇

以下思路来自代码随想录以及官方题解。 文章目录 797.所有可能的路径200.岛屿数量130.被围绕的区域1020.飞地的数量 797.所有可能的路径 给你一个有 n 个节点的 有向无环图(DAG),请你找出所有从节点 0 到节点 n-1 的路径并输出(不…

USB协议学习(三)大容量存储设备SCSI协议分析

笔者来简单介绍一下SCSI得协议命令 1、SCSI协议认识 SCSI:Small Computer System Interface,用于计算机外部设备得接口标准,定义了与外部设备得一套协议。SCSI标准协议族支持很多钟SCSI设备,像盘,打印机,扫…

Ubuntu23.10安装FFmpeg及编译FFmpeg源码

安装FFmpeg: 打开终端: 输入 sudo apt install ffmpeg 安装成功: 验证FFmpeg 默认安装位置与库与头文件位置 使用FFmpeg源码编译: 1.安装YASM sudo apt-get install yasm

[mmucache]-ARMV8-aarch64的虚拟内存(mmutlbcache)介绍-概念扫盲

🔥博客主页: 小羊失眠啦. 🎥系列专栏:《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞👍收藏⭐评论✍️ 思考: 1、cache的entry里都是有什么? 2、TLB的entry里都是有什么? 3、MMU操作…

10-ARM gicv3/gicv4的总结-基础篇

目录 1、gic的版本2、GICv3/gicv4的模型图3、gic中断号的划分4、GIC连接方式5、gic的状态6、gic框架7、gic Configuring推荐 本文转自 周贺贺,baron,代码改变世界ctw,Arm精选, armv8/armv9,trustzone/tee,s…

遗传算法(GA)求解基于栅格地图的机器人最优路径规划,可以自行修改地图(提供MATLAB代码)

通过栅格法建立栅格地图作为机器人路径规划的工作环境,采用遗传算法作为机器人路径搜索的规则.将所有机器人放置于初始位置.经过NC次无碰撞迭代运动找到最优路径.到达目标位置.为防止机器人在路径搜索过程中没有达到最大迭代次数时路径大小已不发生变化而陷入局部最优。 一、部…

JavaWeb-Maven基础

Maven是专门用于管理和构建Java项目的工具,是 Apache 下的一个纯 Java 开发的开源项目,基于项目对象模型(POM)概念。先来学习一下Maven基础,等后面学完开发框架后再学Maven高级,这次的内容如下 一、概述 …

Linux学习——线程的控制

目录 ​编辑 一,线程的创建 二,线程的退出 1,在子线程内return 2,使用pthread_exit(void*) 三,线程等待 四,线程获取自己的id值 五,线程取消 六,线程分离 一,线程的创建 在对…

企微hook源码

企微hook源码已经在QQ群内开源。速度进群下载,避免和谐。 QQ群:649480745 //pc端发送消息回调 void RecvPcMsgRes(DWORD eax) { // OutputDebugStringA("pc发送消息"); PWX_STRING pMsgPb (PWX_STRING)(eax);//消息pb结构体 string pbDa…

打卡--MySQL8.0 一(单机部署)

一路走来,所有遇到的人,帮助过我的、伤害过我的都是朋友,没有一个是敌人。如有侵权,请留言,我及时删除! MySQL 8.0 简介 MySQL 8.0与5.7的区别主要体现在:1、性能提升;2、新的默认…

鸿蒙开发学习入门教程之环境配置

最近鸿蒙开发越来越火,各个大厂都有鸿蒙版本的计划和宣传,看这个趋势,可能会在几年内发展壮大,为我们移动端码农开辟一片新的职场。所以现在开始学起来还是很有必要的。今天就一起开始配置环境搞起来吧。 首先,找到官…

用户管理【MySQL】

文章目录 查看用户信息创建用户修改密码删除用户授予权限收回权限 查看用户信息 在名为mysql的数据库中有一个表user维护着 MySQL 的用户信息。 其中: user: 表示该用户的用户名。host: 表示该用户可以从哪个主机登录,localhost…

【Spark编程基础】实验一Spark编程初级实践(附源代码)

文章目录 一、实验目的二、实验平台三、实验内容和要求1. 计算级数2. 模拟图形绘制3.统计学生成绩 一、实验目的 1.掌握 Scala 语言的基本语法、数据结构和控制结构; 2.掌握面向对象编程的基础知识,能够编写自定义类和特质; 3.掌握函数式编程…

SSL证书:构建网络安全的基石

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

从Pandas到Polars :数据的ETL和查询

对于我们日常的数据清理、预处理和分析方面的大多数任务,Pandas已经绰绰有余。但是当数据量变得非常大时,它的性能开始下降。 本文将介绍如何将日常的数据ETL和查询过滤的Pandas转换成polars。 图片 Polars的优势 Polars是一个用于Rust和Python的Data…

简单接入电商API接口|轻松实现实时采集淘宝、抖音、快手、1688商品,挖掘潜力款

今天给大家带来一款非常实用的电商API接口,这款数据采集接口支持淘宝采集、抖音采集、快手采集、1688采集以及潜力款分析,功能强大,助您在电商领域更上一层楼。 首先,我们来了解一下淘宝采集功能。作为国内最大的电商平台&#xf…

基于Java+springboot+VUE+redis实现的前后端分类版网上商城项目

基于Java springbootVUEredis实现的前后端分类版网上商城项目 博主介绍:多年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言…