Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

读CSS字体标准文档——连字(ligatures) #15

Open
OhCoder opened this issue Nov 8, 2017 · 0 comments
Open

读CSS字体标准文档——连字(ligatures) #15

OhCoder opened this issue Nov 8, 2017 · 0 comments

Comments

@OhCoder
Copy link

OhCoder commented Nov 8, 2017

在读CSS文档中,关于连字部分的内容之前,推荐先读另一篇文章 ,可以帮助你预先了解连字的来龙去脉

什么是连字

为了让一些字体看起来更好,一些字体的字形被设计为双字形或三字形的单一组合体,专门提供给排版软件使用,代为显示特定的字符组合。

字体设计的背景

字体印刷遍布全球,但是并不存在一种独特的方法来对跨语言和文化的字体进行有效的规范。比如,仅仅拉丁文一种字体,其各字母的宽度就千奇百怪。

一种字体包括每个字母的格式以及能够与之对应的字母本身。通常来讲,都是一个字母一个字母进行映射的。当然并不全都如此,比如其中的ligature(连字)。

通常来讲,创建一种多种格式的字体是一件困难的事情。这需要设计师懂得不同字体格式相关的各种传统文化背景。

字体的基本属性

属性 描述
font-family 指定特定字体 + 通用字体

例如:

font-family: "Lucida" Grande, sans-serif;

特定字体

一种引入第三方的或自定义的字体。

通用字体

通常来讲是指浏览器自带的字体。一般包括五种类型:

类型名 描述
serif(衬线字体) 通常按字体的比例进行分隔
sans-serif(无衬线字体) 字体是成比例的,与衬线字体相比,少了衬线
cursive(草书) 模仿手写体
fantasy 主要用来对一些需要装饰或突出表达的字体进行装饰
monospace (等宽字体) 通常打印出来的字体是sans-serif的,但是却是等宽的

font-weight 属性简介

font-weight 属性指定了字体的重量,字体的线条厚度以及字体线条颜色的深浅。

例如:

font-weight: 100;

font-weight: Thin;

效果其实是一样的。

下边这个表格中,左边的数值对应着右边的属性值名称。

数值 属性值
100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Black

font-stretch 属性简介

font-stretch 属性设置了字体的拉伸。例如:

font-stretch: normal;

下边的这个表格罗列了一些可设置的拉伸属性值。

属性值
ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded

font-style 属性简介

font-style 属性可设置三种类型,分别是 normalitalicoblique 。其中 italicoblique 类型的区别在视觉上微小,可参见 stack overflow 上的一则回答。

font-size 属性简介

font-size 属性可设置四种类型的数值。

类型 属性值及描述
绝对值大小(absolute-size) xx-small, x-small, small, medium, large, x-large, xx-large
相对值大小(relative-size) 相对于父级元素,包括:larger, smaller
长度大小(length) 取一个绝对值,具体要看 user agent 的 font table
百分比大小(percentage) 相对于父级元素

font-size-adjust 属性简介

font-size-adjust 设置了字体的比例。属性值为一个数字。精确的定义为,字体的小写字母 “x” 的高度与 “font-size” 高度之间的比率被称为一个字体的 aspect 值。

font 属性简介

font 属性是设置字体的一个通用方法。设置的属性值类型如下:

类型
font-style
font-variant
�font-weight
font-stretch
font-size
line-height
font-family

font-synthesis 属性简介

当所加载的 font-family 所缺少 bold 或 oblique 类型的支持时,font-synthesis 属性可以设置浏览器是否允许浏览器自己合成 bold 或 oblique 。

font-synthesis 可设置的值为none或[weight || style]。如果没有设置 weight ,浏览器则将不被允许合成 bold 效果。如果没有设置 style,浏览器则不被允许合成 italic。如果设置了 none ,浏览器则不被允许合成任何效果。

font 资源属性简介

font-face 是一个加载属性资源的属性。font-face 可以集合多个属性将字体加在进来。比如,

@font-face {
  font-family: SectionHeader;
  src: local("Arial Lihavoitu");  
  font-weight: bold;
  unicode-range: U+00-FF, U+980-9FF;
}

上面这段 CSS 代码加在了一个字体,并指定了 unicode 编码的范围。

以上,常见的 CSS 字体设置就先总结到这里。

更多详情及高级功能可参见 CSS 关于字体的规范,CSS Fonts Module

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant