谈谈一些有趣的CSS题目(十二)– 你该知道的字体 font-family

Arial

Windows 平台上默认的无衬线西文字体,有多种变体,比例及字重(weight)和
Helvetica 极为相近。

 

fantasy 、cuisive

fantasy和 cuisive 字体在浏览器中不常用,在各个浏览器中有明显的差异。

微软雅黑(Microsoft Yahei)

大名鼎鼎的微软雅黑相信都不陌生,从
windows Vista
开始,微软提供了这款新的字体,一款无衬线的黑体类字体,显著提高了字体的显示效果。现在这款字体已经成为
windows 浏览器最值得使用的中文字体。

sans-serif — 无衬线字体

sans 的意思是无,sans-serif
也就是无衬线的意思。专指西文中没有衬线的字体,与汉字字体中的黑体相对应。与衬线字体相反,该类字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。

中文下,无衬线字体就是黑体,黑体字也就是又称方体或等线体,没有衬线装饰,字形端庄,笔画横平竖直,笔迹全部一样粗细。

看看又有哪些常见的无衬线字体。

fantasy 、cuisive

fantasy和
cuisive 字体在浏览器中不常用,在各个浏览器中有明显的差异。

关于作者:chokcoco

国际太阳娱乐网站2138 1

经不住流年似水,逃不过此间少年。

个人主页 ·
我的文章 ·
63 ·
   

国际太阳娱乐网站2138 2

3、兼顾多操作系统

选择字体的时候要考虑多操作系统。例如
MAC OS 下的很多中文字体在 Windows 都没有预装,为了保证 MAC
用户的体验,在定义中文字体的时候,先定义 MAC 用户的中文字体,再定义
Windows 用户的中文字体。其次很多人都不知道 Android
下没有预装微软雅黑和宋体,那么 Android
机型下的中文字体设置又是很考究的。

字体的分类

就 Web 常用的一些字体而言,经常听说的字体类型,大致可以分为这几种:

  • serif(衬线)
  • sans-serif(无衬线)
  • monospace(等宽)
  • fantasy(梦幻)
  • cuisive(草体)

其实大体上分为衬线字体和无衬线字体,等宽字体中也有衬线等宽和无衬线等宽字体,这
5 个分类是 font-family 的 5 个可用字体系列取值。

国际太阳娱乐网站2138 3

也就是说,上述 5
个名字,代表的并非某个特定字体,而是一系列字体,这些通用的名称允许用户代理(通常就是浏览器)从相应集合中选择一款字体。

这也很好解释了,font-family 中的 family
,家庭的意思,也就是不单单指一个,而是可以指定多个,上述 5
个英文单词都是 font-family 的可用取值,下文还会详细讲到。

下面详细了解一下每类字体。(本来每一个字体都有贴示意图的,无奈博客园摆出来太影响美观,可以移步我的Github阅读)

正文从这里开始。小小的字体其实有大大的学问,可能与字体相关的很多知识都偏设计,不过俗话说技多不压身,艺高人胆大,多了解了解总归没错。

字体书写规则

综上,总结一下,我觉得字体 font-family 定义的原则大概遵循:

Times New Roman

Mac 平台
Safari
下默认的英文字体,是最常见且广为人知的西文衬线字体之一,众多网页浏览器和文字处理软件都是用它作为默认字体。

 

华文黑体(STHeiti)、华文细黑(STXihei)

属于同一字体家族系列,MAC OS X 10.6
之前的简体中文系统界面的默认中文字体,正常粗细就是华文细黑,粗体下则是华文黑体。

字体定义顺序

字体定义顺序是一门学问,通常而言,我们定义字体的时候,会定义多个字体或字体系列。举个栗子:

body {
    font-family: tahoma, arial, 'Hiragino Sans GB', '5b8b4f53', sans-serif;
}

别看短短 5
个字体名,其实其中门道很深。解释一下:

  1. 使用 tahoma 作为首选的西文字体,小字号下结构清晰端整、阅读辨识容易;
  2. 用户电脑未预装 tohoma,则选择 arial 作为替代的西文字体,覆盖
    windows 和 MAC OS;
  3. Hiragino Sans GB 为冬青黑体,首选的中文字体,保证了
    MAC 用户的观看体验;
  4. Windows
    下没有预装冬青黑体,则使用 ‘5b8b4f53’
    宋体为替代的中文字体方案,小字号下有着不错的效果;
  5. 最后使用无衬线系列字体 sans-serif 结尾,保证旧版本操作系统用户能选中一款电脑预装的无衬线字体,向下兼容。

嗯,其实上面的 font-family 就是淘宝首页 body 的字体定义,非常的规范,每一个字体的定义都有它的意义。国际太阳娱乐网站2138 4

 

有趣的CSS题目(12):你该知道的字体 font-family

2017/01/06 · CSS · 1
评论 ·
字体

本文作者: 伯乐在线 –
chokcoco
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

小小的字体其实有大大的学问,可能与字体相关的很多知识都偏设计,不过俗话说技多不压身,艺高人胆大,多了解了解总归没错。

国际太阳娱乐网站2138 5

所有题目汇总在我的 Github 。

国际太阳娱乐网站2138,字体定义的细节

其他一些小细节也很重要,譬如定义字体的时候,何时需要在字体两端添加引号?像这样:

p{ font-family: ‘Microsoft YaHei’, ‘黑体-简’, ‘5b8b4f53’; }

1
2
3
p{
    font-family: ‘Microsoft YaHei’, ‘黑体-简’, ‘5b8b4f53’;
}

当字体名字中间有空格,中文名字体及 Unicode
字符编码表示的中文字体,为了保证兼容性,都建议在字体两端添加单引号或者双引号。

Consolas

这是一套等宽的字体,属无衬线字体。这个字体使用了微软的
ClearType
字型平滑技术,主要是设计做为代码的显示字型之用,特别之处是它的“0”字加入了一斜撇,以方便与字母“O”分辨。

style=”font-family: verdana, geneva; font-size: 14px;”>ClearType:由微软在其操作系统中提供的屏幕亚像素微调字体平滑工具,让
Windows 字体更加漂亮。在 Windows XP
平台上,这项技术默认是关闭,到了Windows Vista 才默认为开启。

国际太阳娱乐网站2138 6

上图是
Github
代码区块的字体设置,可以看到,默认字体就是 Consolas ,紧接着的几个都是其它等宽字体,如果用户的系统中都没有预装这些字体,则会匹配最后一个 monospace ,它表示等宽字体系列,会从用户系统中的等宽字体中选取一个展示。

3、兼顾多操作系统

选择字体的时候要考虑多操作系统。例如 MAC OS 下的很多中文字体在 Windows
都没有预装,为了保证 MAC 用户的体验,在定义中文字体的时候,先定义 MAC
用户的中文字体,再定义 Windows 用户的中文字体;

冬青黑体(Hiragino Sans GB)

又叫苹果丽黑,Hiragino
是字游工房设计的系列字体名称。是一款清新的专业印刷字体,小字号时足够清晰,Mac
OS X 10.6 开始自带有 W3 和 W6 。

中文字体的兼容写法

一些中文字体,例如font-family: '宋体',由于字符编码的问题,少部分浏览器解释这个代码的时候,中文出现乱码,这个时候设定的字体无法正常显示。

所以通常会转化成对应的英文写法或者是对应的 unicode
编码,font-family:'宋体' -> font-family: '5b8b4f53'

5b8b4f53 是宋体两个中文字的 unicode 编码表示。类似的写法还有:

  • 黑体:9ED14F53
  • 微软雅黑:5FAE8F6F96C59ED1
  • 华文细黑:534E65877EC69ED1
  • 华文黑体:534E65879ED14F53

Unicode编码: 人们希望在一套系统里面能够容纳所有字符,Unicode
编码解决传统的字符编码方案的局限性,每个字符占用 2
字节。这样理论上一共最多可以表示2^16(即65536)个字符。基本满足各种语言的使用。

 

2、西文在前,中文在后

由于大部分中文字体也是带有英文部分的,但是英文部分又不怎么好看,同理英文字体中大多不包含中文。

所以通常会先进行英文字体的声明,选择最优的英文字体,这样不会影响到中文字体的选择,中文字体声明则紧随其次。

字体的分类

就 Web
常用的一些字体而言,经常听说的字体类型,大致可以分为这几种:

  • serif(衬线)
  • sans-serif(无衬线)
  • monospace(等宽)
  • fantasy(梦幻)
  • cuisive(草体)

其实大体上分为衬线字体和无衬线字体,等宽字体中也有衬线等宽和无衬线等宽字体,这
5 个分类是 font-family 的 5 个可用字体系列取值。

国际太阳娱乐网站2138 7

也就是说,上述 5
个名字,代表的并非某个特定字体,而是一系列字体,这些通用的名称允许用户代理(通常就是浏览器)从相应集合中选择一款字体。

这也很好解释了,font-family 中的
family ,家庭的意思,也就是不单单指一个,而是可以指定多个,上述 5
个英文单词都是 font-family 的可用取值,下文还会详细讲到。

下面详细了解一下每类字体。(本来每一个字体都有贴示意图的,无奈博客园摆出来太影响美观,可以移步我的Github阅读)

 

Helvetica、Helvetica Neue

被广泛用于全世界使用拉丁字母和西里尔字母的国家。Helvetica
是苹果电脑的默认字体,微软常用的Arial 字体也来自于它。

sans-serif — 无衬线字体

sans
的意思是无,sans-serif
也就是无衬线的意思。专指西文中没有衬线的字体,与汉字字体中的黑体相对应。与衬线字体相反,该类字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。

中文下,无衬线字体就是黑体,黑体字也就是又称方体或等线体,没有衬线装饰,字形端庄,笔画横平竖直,笔迹全部一样粗细。

看看又有哪些常见的无衬线字体。

4、兼顾旧操作系统,以字体族系列 serif 和 sans-serif 结尾

当使用一些非常新的字体时,要考虑向下兼容,兼顾到一些极旧的操作系统,使用字体族系列 serif 和sans-serif 结尾总归是不错的选择。

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。


开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的
CSS 细节。

解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的
CSS 属性,赶紧去补习一下吧。

不断更新,不断更新,不断更新,重要的事情说三遍。

所有题目汇总在我的 Github 。

  • 有趣的CSS题目(1):
    左边竖条的实现方法
  • 有趣的CSS题目(2):
    从条纹边框的实现谈盒子模型
  • 有趣的CSS题目(3):
    层叠顺序与堆栈上下文知多少
  • 有趣的CSS题目(4): 从倒影说起,谈谈 CSS 继承
    inherit
  • 有趣的CSS题目(5):
    单行居中,两行居左,超过两行省略
  • 有趣的CSS题目(6):
    全兼容的多列均匀布局问题
  • 有趣的CSS题目(7):消失的边界线问题
  • 有趣的CSS题目(8):纯CSS的导航栏Tab切换方案
  • 有趣的CSS题目(9):巧妙实现 CSS
    斜线
  • 有趣的CSS题目(10):结构性伪类选择器
  • 有趣的CSS题目(11):reset.css
    知多少?

打赏支持我写出更多好文章,谢谢!

打赏作者

Arial

Windows
平台上默认的无衬线西文字体,有多种变体,比例及字重(weight)和 Helvetica
极为相近。

宋体(SimSun)

Windows
下大部分浏览器的默认中文字体,是为适应印刷术而出现的一种汉字字体。笔画有粗细变化,是一种衬线字体,宋体在小字号下的显示效果还可以接受,但是字号一大体验就很差了,所以使用的时候要注意,不建议做标题字体使用。

Tahoma

十分常见的无衬线字体,字体结构和
Verdana 很相似,其字元间距较小,而且对 Unicode
字集的支持范围较大。许多不喜欢 Arial 字体的人常常会改用 Tahoma
来代替,除了是因为 Tahoma 很容易取得之外,也是因为 Tahoma 没有一些 Arial
为人诟病的缺点,例如大写“i”与小写“L”难以分辨等。(这里故意反过来写)。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

国际太阳娱乐网站2138 8
国际太阳娱乐网站2138 9

1 赞 3 收藏 1
评论

Verdana

无衬线字体,优点在于它在小字上仍结构清晰端整、阅读辨识容易。

Verdana

无衬线字体,优点在于它在小字上仍结构清晰端整、阅读辨识容易。

serif — 衬线字体

serif,意为有衬线的字体,衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰,而且笔画的粗细会有所不同,这些细节在大写字母中特别明显。

OK,那么有哪些常用字体属于衬线字体呢?

monospace — 等宽字体

这系列字体程序员们其实都不陌生。我们用来敲代码的编辑器,字体的选择经常就是一类等宽字体。

等宽字体是指字符宽度相同的电脑字体,常见于 IDE
或者编辑器中,每个字母的宽度相等,通常用于计算机相关书籍中排版代码块。

国际太阳娱乐网站2138 10

除了 IDE
,我们看到的技术文章中的代码块中,经常也是使用等宽字体进行排版。

国际太阳娱乐网站2138 5

微软雅黑(Microsoft Yahei)

大名鼎鼎的微软雅黑相信都不陌生,从 windows Vista
开始,微软提供了这款新的字体,一款无衬线的黑体类字体,显著提高了字体的显示效果。现在这款字体已经成为
windows 浏览器最值得使用的中文字体。

谈谈一些有趣的CSS题目(二)–
从条纹边框的实现谈盒子模型

Tahoma

十分常见的无衬线字体,字体结构和 Verdana 很相似,其字元间距较小,而且对
Unicode 字集的支持范围较大。许多不喜欢 Arial 字体的人常常会改用 Tahoma
来代替,除了是因为 Tahoma 很容易取得之外,也是因为 Tahoma 没有一些 Arial
为人诟病的缺点,例如大写“i”与小写“L”难以分辨等。(这里故意反过来写)。

 

冬青黑体(Hiragino Sans GB)

又叫苹果丽黑,Hiragino
是字游工房设计的系列字体名称。是一款清新的专业印刷字体,小字号时足够清晰,Mac
OS X 10.6 开始自带有 W3 和 W6 。

华文黑体(STHeiti)、华文细黑(STXihei)

属于同一字体家族系列,MAC
OS X 10.6
之前的简体中文系统界面的默认中文字体,正常粗细就是华文细黑,粗体下则是华文黑体。

Consolas

这是一套等宽的字体,属无衬线字体。这个字体使用了微软的 ClearType
字型平滑技术,主要是设计做为代码的显示字型之用,特别之处是它的“0”字加入了一斜撇,以方便与字母“O”分辨。

ClearType:由微软在其操作系统中提供的屏幕亚像素微调字体平滑工具,让
Windows 字体更加漂亮。在 Windows XP
平台上,这项技术默认是关闭,到了Windows Vista 才默认为开启。

国际太阳娱乐网站2138 6

上图是 Github
代码区块的字体设置,可以看到,默认字体就是 Consolas ,紧接着的几个都是其它等宽字体,如果用户的系统中都没有预装这些字体,则会匹配最后一个 monospace ,它表示等宽字体系列,会从用户系统中的等宽字体中选取一个展示。

谈谈一些有趣的CSS题目(八)–
纯CSS的导航栏Tab切换方案

黑体-简(Heiti SC)

从 MAC OS X 10.6
开始,黑体-简代替华文黑体用作简体中文系统界面默认字体,苹果生态最常用的字体之一,包括
iPhone、iPad 等设备用的也是这款字体。

2、西文在前,中文在后

由于大部分中文字体也是带有英文部分的,但是英文部分又不怎么好看,同理英文字体中大多不包含中文。

所以通常会先进行英文字体的声明,选择最优的英文字体,这样不会影响到中文字体的选择,中文字体声明则紧随其次。

serif — 衬线字体

serif,意为有衬线的字体,衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰,而且笔画的粗细会有所不同,这些细节在大写字母中特别明显。

OK,那么有哪些常用字体属于衬线字体呢?

解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的
CSS 属性,赶紧去补习一下吧。

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图