font-family

最新推荐文章于 2024-04-13 08:10:06 发布

junlin_tu

最新推荐文章于 2024-04-13 08:10:06 发布

阅读量3.1k

点赞数

分类专栏：前端文章标签： css font-family

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

// System Font // https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/
-apple-system, // OSX ^10.11 & iOS ^9 San Francisco & 苹方

// English First
"Helvetica Neue", // OSX
"Arial", // Win "Helvetica"
//" Segoe UI", // Win ^8

// Chinese Fallback
"PingFang SC", // OSX ^10.11 & iOS ^9 苹方（华康信凭黑）
"Hiragino Sans GB", // OSX ^10.6 冬青黑体
"STHeiti", // OSX <10.6 & iOS <9 华文黑体
"Microsoft YaHei", // Win 微软雅黑
"Microsoft JhengHei", // Win 微软正黑
"Source Han Sans SC", // SourceHan - begin 思源黑体
"Noto Sans CJK SC",
"Source Han Sans CN",
"Noto Sans SC",
"Source Han Sans TC",
"Noto Sans CJK TC", // SourceHan - end
"WenQuanYi Micro Hei", // Linux 文泉驿微米黑
SimSun, // Win old 中易宋体

sans-serif; // System Fallback

\5b8b\4f53 //宋体

tahoma //英文windows操作系统默认的西文字体

以下转载：http://moxfive.xyz/2015/12/09/css-font-family/

基本用法

使用语法

1 2	font-family: 字体名1, 字体名2, 字体名n, 字体系列名; font-family: Verdana, Helvetica, "Microsoft YaHei", Arial;

语法说明

系统将选择列表中最先可用的字体来显示文字;
因为规则1，通常在最末添加一个 generic-family 字体系列名，保证文字获得相似的显示效果;
因为规则1，西文字体名应该写在中文字体前，这样才能中英文同时使用不同字体;
字体名为中文或包含空格等时，需要加双引号””才能正确识别;
中文字体建议也是用其对应英文字体名，如”微软雅黑”为”Microsoft YaHei”，以提高编码兼容性。

常见字体系列

Serif 衬线字体

Times New Roman, Georgia 和宋体都是很常见的衬线字体；
特征: 文字笔划的开始或结束处有额外的装饰，笔划有粗细之分。

Sans-serif 无衬线字体

Arial, Verdana, Tahoma, 微软雅黑都是很常见的无衬线字体;
说明: sans-源于法语前缀，意思为没有。Sans-serif 也就是指无衬线字体。
特征: 字体比较圆滑，笔划较为均匀。

字体选用: 有种说法是正文多用衬线字体，易于区分；标题多用无衬线字体。不过这个也看个人喜好，我更习惯正文用无衬线字体。如果实在不知道怎么选，随便找一个自己看着舒服的网站，套用它的字体样式好了。

Monospace 等宽字体

Courier New, Consolas, Menlo 都是比较常见的等宽字体;
特征: 字母、数字、空格以及其他符号所占宽度都一致。识别度高，易于对齐和定位，通常用于显示代码。

一个优秀的代码字体除了等宽外，还应该能较好地区分出0 o O i l 1 I "" '' [] () {} 等字符。

Cursive 手写体

Comic Sans, Author, 华文行楷都是比较常见的仿手写体;
特征: 模仿人的手写体，笔划圆滑或者有连笔等装饰。英文的花体，中文的行书草书等都属于此类。

获取字体名称

同一个字体在不同系统和应用中可能会显示为不同名字，但其内部一般有一个不变的英文名字。CSS font-family 需要引用的就是字体的内部名字。

本地字体

Win 上通过搜索或控制面板进入字体文件夹，然后双击字体查看字体名称;
通过软件，如记事本、Office 等也可以查看字体名字:

Mac 上搜索打开字体册即可，中间一栏显示的就是字体名称:

网页字体

审查元素，查看生效的 font-family:

通过 Chrome 插件 WhatFont:

字体图标

使用@font-face引入字体后，可以像使用文字那样，无损的控制图标的大小，颜色等样式。常见的有 Webdings，Wingdings, Font Awesome.

备用记录

字体配置

下面是自己目前比较常用的字体配置，通常按系列设置为 CSS 预处理器的变量，方便调用。

//中文
font-chs = "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei"
//无衬线字体
font-sans = Verdana, "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif
//衬线字体
font-serif = Times, Georgia, serif
//等宽字体
font-mono = Menlo, Consolas, "Source Code Pro", Inconsolata, Monaco, "Courier New", monospace

字体英文名

一些常见中文字体的对应英文名。

-	中文名	英文名
1	苹方	PingFang SC
2	冬青黑/苹果丽黑	Hiragino Sans GB
3	思源黑体	Source Han Sans CN
4	华文细黑	STHeiti Light [STXihei]
5	华文黑体	ST Heiti
6	华文楷体	STKaiti
7	华文宋体	STSong
8	华文仿宋	STFangsong
9	丽黑 Pro	LiHei Pro Medium
10	丽宋 Pro	LiSong Pro Light
11	标楷体	BiauKai
12	苹果丽中黑	Apple LiGothic Medium
13	苹果丽细宋	Apple LiSung Light
14	新细明体	PMingLiU
15	细明体	MingLiU
16	标楷体	DFKai-SB
17	(中易)黑体	SimHei
18	宋体	SimSun
19	新宋体	NSimSun
20	仿宋	FangSong
21	楷体	KaiTi
22	仿宋_GB2312	FangSong_GB2312
23	楷体_GB2312	KaiTi_GB2312
24	微软正黑体	Microsoft JhengHei
25	微软雅黑	Microsoft YaHei
26	隶书	LiSu
27	幼圆	YouYuan
28	华文中宋	STZhongsong
29	方正舒体	FZShuTi
30	方正姚体	FZYaoti
31	华文彩云	STCaiyun
32	华文琥珀	STHupo
33	华文隶书	STLiti
34	华文行楷	STXingkai
35	华文新魏	STXinwei
36	文泉驿微米黑	Wenquanyi Micro Hei
37	文泉驿正黑	WenQuanYi Zen Hei
38	文泉驿点阵正黑	WenQuanYi Zen Hei Sharp