web中常见字体

coderklaus
802 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情

不同的操作系统、不同浏览器下内嵌的默认字体是不同的，错误的字体设置会导致页面在不同环境渲染的混乱，选择一套合适的字体是打造优秀网页的第一步。

字体分类

字体描述
serif(衬线)在字的笔划开始及结束的地方有额外的装饰，而且笔画的粗细会有所不同
常见的衬线字体有Times New Roman、宋体
sans-serif(无衬线)Sans Serif字体没有这些额外的装饰，笔划粗细大致差不多，字形端庄，横平竖直
常见的无衬线字体有Tahoma、Verdana、Arial、Helvetica、苹方、微软雅黑等等
monospace(等宽)等宽字体是指字符宽度相同的字体，通常用于编辑器以及技术文章的代码块中
fantasy(梦幻)一些具有特殊艺术效果的字体 --- 一般不是系统默认字体，如果使用需要font-face
cuisive(草体)草体 --- 一般不是系统默认字体，如果使用需要font-face

LhzRd2.png

默认字体

系统字体说明
ios / macOSPingFang SC
(苹方-简)		苹方是苹果专为中国用户打造的一个中文无衬线字体，在2017年和San Francisco一起推出，SC代表简体，同时还有台湾繁体和香港繁体，整体造型简洁美观，是苹果系统默认的中文字体
windowsMicrosoft YaHei
(微软雅黑)		Windows系统默认的中文字体，也是一套无衬线字体
macOS上的浏览器大都预装微软雅黑，但不包括safari浏览器。
ios和android系统不支持微软雅黑
androidNoto Sans
(思源黑体)		Android系统的默认中文无衬线字体
由google推出的一款开源字体
linuxWenQuanYi Micro Hei
(文泉驿微米黑)		Linux系统下默认中文字体，一般为了兼容Linux系统才会设置这个字体

在中国不同的安卓机，有自己不同的默认字体

例如 小米机的默认字体是 小米兰亭

system-ui

/*
	system-ui是一种通用字体系列，它选择当前操作系统下的默认系统字体
*/
font-family: system-ui;

sans-serif 和 serif

类型说明
sans-serif使用系统默认设置的无衬线字体
serif使用系统默认设置的衬线字体

在现行主流终端设备中，无衬线体比有衬线体更易读，所以无衬线体更适合作为网页的默认全局字体设置。

每个系统都会带有无衬线字体，所以sans-serif一般放在最后作为兜底，sans-serif之后的字体都不会生效，除了Emoji字体。

书写字体规则

  1. 不同平台，预置的字体并不相同

  2. 字体是有版权的

    但是如果没有引用外部字体文件（如 使用font-face加载网络字体），而仅仅是在 CSS 中指定字体名称，不需要购买授权，因为其只是一段声明，表示期望浏览器优先使用某种字体渲染文本。

  3. 西文在前，中文在后

    中文字体大多都包含西文，但西文的部分又不好看，而西文不包含中文，通常先定义西文，后定义中文以达到更优的显示效果。

  4. 以serif或sans-serif字体族结尾

    为了保证在各种不同环境或条件下显示正常，我们一般将sans-serif放在字体的后面，非衬线字体在显示器中的显示效果更好

/*
    字体设置 参考 (Web 字体 font-family 浅谈)[https://segmentfault.com/a/1190000038284125]
*/
body {
  font-family:
    /* ios/macOS */
    "Helvetica Neue",
    "Helvetica",
    /*
    	"SC"指的是“简体” (simplified chinese)
    	"TC"，指的是“繁体” (traditional chinese)
    */
    "PingFang SC",
    /*
    	Hiragino Sans GB --- 冬青黑体
    	苹果系统中较早的中文无衬线字体，为了兼容旧版macOS系统，一般作为苹方字体的fallback
    */
    "Hiragino Sans GB",
    /* 
    	android默认字体
    	Source Han Sans 和 Noto Sans CJK都可以来表示思源黑体
    	思源黑体是Adobe和google联合开发的
    	但是 Adobe把思源黑体称为 Source Han Sans
    	谷歌 把思源黑体称为 Noto Sans CJK(CJK：Chinese, Japanese, Korean)
    */
    "Source Han Sans",
    /* 
      两种都设置一下，
      以免因为字体名称不一致而无法展示对应的效果
    */
    "Noto Sans CJK",
    /* windows默认字体  */
    "Microsoft YaHei",
    /* linux默认字体  */
    "WenQuanYi Micro Hei",
    /*  系统默认无衬线字体 */
    sans-serif;
  /* 以下2个字体 用于设置字体平滑效果 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f2f2f2;
  margin: 0;
  font-size: 16px;
}
avatar
文章
阅读
粉丝