CSS 字体介绍

选择合适的字体,对提高网页的美观度和可读性有着举足轻重的作用。本文简要介绍了 CSS 中与字体相关的知识。

指定字体

CSS 的 font-family 命令,指定了网页元素所使用的字体,如

font-family: Georgia, "Times New Roman", 
             "Microsoft YaHei", "微软雅黑", 
             STXihei, "华文细黑", 
             serif;

生效规则

  1. 优先使用排在前面的字体。
  2. 如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。
  3. 如果所列出的字体,都无法满足需要,则操作系统自行决定使用哪种字体。

使用注意点

  1. 绝大部分中文字体里包含英文字母(基本上都很丑),而英文字体是不包含中文字符的。因此 font-family 应该优先指定英文字体,然后再指定中文字体。否则,中文字体所包含的英文字母,会取代英文字体,而这往往很丑的。
  2. 把 Mac 支持的字体放在 Windows 前面。因为有一部分Mac用户装了Windows 下的常用字体(这得归功于 Office for Mac),但极少的Windows 用户装了Mac的常用字体。
  3. 为了保证兼容性,中文字体的中文名称和英文名称,应该都写入font-family。比如,"微软雅黑"的英文名称是Microsoft YaHei。
  4. 如果字体名称中间有空格,则要用双引号把字体名称包起来。如 "Microsoft Yahei"。

衬线体和无衬线体

所谓"衬线体"(Serif),指的是笔画的末端带有衬线的字体。

一般来说,衬线体装饰性强,往往用于标题;无衬线体清晰度好,往往用于正文。

兼容大部分浏览器,系统的英文字体

衬线字体(Serif Fonts)

Georgia, Times New Roman, Times, serif

非衬线字体(Sans-Serif Fonts)

Arial, Verdana, Geneva, Helvetica, sans-serif

等宽字体(Monospace Fonts)

Courier New, Courier, monospace

常见的中文字体

宋体(SimSun)

宋体是最常见的中文字体,如果没有指定字体,操作系统往往选择它来渲染。很多人认为,这种字体并不美观。 写法

font-family: Arial, Helvetica, tahoma, verdana, 宋体, SimSun, 华文细黑, STXihei, sans-serif;

微软雅黑(Microsoft YaHei)

微软雅黑的美观度和清晰度都较好,可以作为网页的首选字体。它在Mac平台的对应字体是华文细黑(STXihei)。

但是,Windows 7之后的版本才安装了这个字体。如果没有,可以选择黑体(Simhei)替代。不过,黑体比较粗,不应用于字号较小的文字。 写法(加了宋体做后备)

font-family: Tahoma, Arial, Helvetica,
             "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑",
              宋体, SimSun, STXihei, "华文细黑", sans-serif;

仿宋(FangSong)

这种字体是衬线体,比宋体的装饰性更强。如果字号太小,会影响清晰度,所以只有在字号大于14px的情况下,才可以考虑这种字体。 写法

font-family: Georgia, "Times New Roman", "FangSong", "仿宋", STFangSong, "华文仿宋", serif;

楷体(KaiTi)

楷体也是衬线体,装饰性与仿宋体接近,但是宽度更大,笔画更清楚一些。这种字体也不应该在小于14px的情况下使用。 写法

font-family: Georgia, "Times New Roman", "KaiTi", "楷体", STKaiti, "华文楷体", serif;

web 字体

如果你不满足于系统预装的一些字体,那么,你可以使用web字体。 推荐几个主流的的web字体的网站

一些网站设置的字体

Type Is Beautiful (有关文字设计和视觉文化的网站)

"Classic Grotesque W01",Arial,"Hiragino Sans GB",
"STHeiti","Microsoft YaHei","WenQuanYi Micro Hei",SimSun,sans-serif

百度

arial,"Hiragino Sans GB","Microsoft Yahei","微软雅黑","宋体",宋体,
Tahoma,Arial,Helvetica,STHeiti

淘宝

tahoma,arial,"Hiragino Sans GB",宋体,sans-serif

QQ(http://www.qq.com/)

"宋体","Arial Narrow",HELVETICA

豆瓣

Helvetica,Arial,sans-serif

Github

Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏拂晓风起

结合JSFL/actionscript 实现轮廓动画

1095
来自专栏老司机的简书

老司机带你走进Core Animation 之几种动画的简单应用

之所以要写这几种简单应用呢,是为了帮大家扩展一下思维,基于CAAnimation和CADisplayLink其实我们可以做到很多事情,不过我们都还是需要一个思路...

1142
来自专栏Java后端技术

一套简约漂亮的响应式博客园主题皮肤分享给你们

  最近在自己博客园逛的时候,总会有一个感觉,真是太丑了,然而又觉得自己暂时抽不出太多的时间来搭建自己的博客系统,上网一搜才发现,原来我们可以自定义博客的布局以...

1363
来自专栏数据结构与算法

菜鸡博客开……开……开源了!

因为很多人找我要过博皮源码,所以本宝宝经过深思熟虑,最终决定把自己的源码分享给大家!

1604
来自专栏Coding迪斯尼

对Box2D的物理世界进行图像美化和关卡选择设计

我们用Box2D绘制了很多几何图形,例如圆形,矩形,复杂一点就是两个矩形交叉的合在一起,中间再加个圆形。显然这种界面“太素”了,一个丰富多彩,五彩斑斓的游戏世界...

891
来自专栏非典型技术宅

iOS动画系列之五:基础动画之缩放篇&旋转篇Swift+OC1. 思路和最终成果2. 抽取公共方法3. 懒加载Layer4. 添加动画

1471
来自专栏walterlv - 吕毅的博客

WPF 和 UWP 中,不用设置 From 或 To,Storyboard 即拥有更灵活的动画控制

发布于 2017-10-26 04:55 更新于 2018-02...

661
来自专栏编程之旅

高性能设置圆角,告别离屏渲染

今天来写一个老生常谈的话题,也是一个面试的高频问题,我也在面试时不止一次被问到过这个问题——如何高性能的设置圆角。就用他作为2017年春节上班之后的第一篇文章。

1951
来自专栏我和未来有约会

Silverlight 3.0 中的 WriteableBitmap

Silverlight 3.0 中的 WriteableBitmap 尽管矢量图形非常的强大但是在有些情况下还是需要用到位图,因为他们在运行时能得到更高的执行效...

2008
来自专栏游戏开发那些事

【Unity游戏开发】浅谈 NGUI 中的 UIRoot、UIPanel、UICamera 组件

马三最近换到了一家新的公司撸码,新的公司 UI 部分采用的是 NGUI 插件,而之前的公司用的一直是 Unity 自带的 UGUI,因此马三利用业余时间学习了一...

1732

扫码关注云+社区

领取腾讯云代金券