在 Web 内容中使用系统字体
时间:2019-08-16
本文章向大家介绍在 Web 内容中使用系统字体,主要包括在 Web 内容中使用系统字体使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
某天(2016.07.12)发现 GitHub 的字体比原来宽了一些,打开开发者工具一看,字体设置中多了两个奇怪的玩意:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
-apple-system
、BlinkMacSystemFont
是什么东东?根据 Webkit 博客,-apple-system
用于调用系统默认 UI 字体,并且会根据 font-weight
声明选择恰当的变体。system
将来有可能成为标准,-apple-
为过渡阶段的厂商前缀。
又该去更新字体列表了 :(。
body {
font-family:
/* 1 */ system, -apple-system, BlinkMacSystemFont,
/* 2 */ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
/* 3 */ "Helvetica Neue", sans-serif;
}
第一组映射系统 UI 字体:
-apple-system
:macOS 和 iOS 平台的 Safari 指向 San Francisco,更老版本的 macOS 指向 Neue Helvetica 和 Lucida Grande(中文字体待验证)BlinkMacSystemFont
:为 macOS Chrome 应用系统 UI 字体,与上面等同
第二组定义已知的系统 UI 字体:
Segoe UI
面向 Windows 和 Windows PhoneRoboto
Android 及 较新的 Chrome OSOxygen
面向 KDE、Ubuntu 等Fira Sans
面向 Firefox OSDroid Sans
面向老版本 Android
第三组回退处理:
Helvetica Neue
El Capitan 之前的 macOS 系统 UI 字体sans-serif
字体回退
考虑到中文字体,最终的列表可能是:
body {
font-family:
system, -apple-system, BlinkMacSystemFont,
"PingFang SC", "Segoe UI", "Microsoft YaHei", "wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", Helvetica, Arial, sans-serif;
}
是不是又臭又长?维护这么个列表也够蛋疼的。简单一点,何尝不好:
font-family: sans-serif;
关于苹方
可以直接指定具体的字形:
.some-element {
font-family: "PingFang SC ExtraLight"; /* 或者 "PingFang SC Thin" */
font-family: "PingFang SC Light";
font-family: "PingFang SC"; /* 或者 "PingFang SC Regular" */
font-family: "PingFang SC Medium";
font-family: "PingFang SC Semibold";
font-family: "PingFang SC Heavy";
}
或者预先定义好,使用 "PingFang-SC"
引用,浏览器根据 font-weight
去选择不同的变体。
@font-face {
font-family: "PingFang-SC";
font-weight: 100;
src: local("PingFang SC Thin");
}
@font-face {
font-family: "PingFang-SC";
font-weight: 300;
src: local("PingFang SC Light");
}
@font-face {
font-family: "PingFang-SC";
font-weight: 400;
src: local("PingFang SC Regular");
}
@font-face {
font-family: "PingFang-SC";
font-weight: 500;
src: local("PingFang SC Medium");
}
@font-face {
font-family: "PingFang-SC";
font-weight: 700;
src: local("PingFang SC Semibold");
}
@font-face {
font-family: "PingFang-SC";
font-weight: 800;
src: local("PingFang SC Heavy");
}
body {
font-family: "PingFang-SC", sans-serif;
}
原文地址:https://www.cnblogs.com/2019gdiceboy/p/11365271.html
- 关于定位position的相关知识
- Docker+Jenkins持续集成环境(1)使用Docker搭建Jenkins+Docker持续集成环境
- 段落首字下沉
- 【编程基础】C语言指针、引用和取值
- Docker+Jenkins持续集成环境(2)使用docker+jenkins构建nodejs前端项目
- JavaScript中的this详解
- 使用SpringBoot开发REST服务
- CSS3 -webkit-filter 滤镜
- Docker+Jenkins持续集成环境(3)集成PMD、FindBugs、Checkstyle静态代码检查工具并邮件发送检查结果
- Javascript中的Label语句
- 从编辑距离、BK树到文本纠错
- iframe基本知识及iframe版本Tab切换
- switch语句以及与if的比较
- kgtemp文件转mp3工具
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 网站 SSL 检测 PCI DSS 不合规解决办法
- leetcode链表之分割链表
- 五分钟带你读懂 TCP全连接队列(图文并茂)
- Python基础
- JDK15正式发布,新增功能预览!
- Magicodes.IE 2.3重磅发布——.NET Core开源导入导出库
- 安防视频监控系统视频上云解决方案EasyCVR音频基础知识介绍
- 安防视频监控系统视频上云解决方案EasyCVR语音转发功能音频数据打包发送流程介绍
- 视频上云/安防视频融合平台/安防视频云服务EasyCVR通道播放界面出现样式重叠如何修正?
- 什么是MySQL数据库?看这一篇干货文章就够了!
- 折线图
- 雷达图
- Cypress系列(49)- invoke() 命令详解
- java线程池(三):ThreadPoolExecutor源码分析
- 社会工程学