字体

作者: 小遁哥 | 来源:发表于2018-03-10 20:48 被阅读7次

1.css 定义了5中通用字体系列
font-family:sans-serif;
表示使用一种sans-serif字体 但不关心是哪一类,用户代理会从sans-serif中选一类。

  • 应该在font-family选择一个通用字体系统
    Serif 字体
    这些字体成比例,而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度,则成该字符是成比例的。例如,小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰,比如小写 l 顶部和底部的短线,或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。

Sans-serif 字体
这些字体是成比例的,而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。

Monospace 字体
Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出,甚至更老式的视频显示终端。采用这些字体,每个字符的宽度都必须完全相同,所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线,也可能没有。如果一个字体的字符宽度完全相同,则归类为 Monospace 字体,而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。

Cursive 字体
这些字体试图模仿人的手写体。通常,它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如,大写 A 再其左腿底部可能有一个小弯,或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。

Fantasy 字体
这些字体无法用任何特征来定义,只有一点是确定的,那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。
理论上讲,用户安装的任何字体系列都会落入到上述某种通用系列中,但实际上可能并非如此,不过例外情况(如果有的话)往往很少。
2.使用引号
只有当一个字体命中有一个或多个空格(如New York),或者如果字体包裹#或$之类的符号,才需要在font-family声明中加引号。
如果字体名于五种通用字体名冲突则需要加引号。
如果没有引号,尽管规则的余下部分会得到处理,但用户代理有可能忽略这个特定的字体名。
尽管css2.1规范,包含符号的字体名并不一定要加引号,但这是一种推荐做法,它类似于css规范中描述的“最佳实践”。
3.font-weight
加粗实际上是使用特定字体的不同变种,虽然在100-900范围内,但是实际上,某些字体可能没有响应 ,因为不是所有字体都具备100-900的权重,当遇到不存在的权重时用户代理会根据相应的规则去匹配
除了数值之外还提供了normal、bold、inherit、bloder、lighter 后两者是相对于父元素去计算的

详情可参考这篇文章https://www.jianshu.com/p/f9c6f9729fbb
4.font-size
font-size属性与你看到的实际字体大小之间的具体关系由字体的设计者来确定。这种关系设置为字体本身中的一个em方框,定义字体时可能要求所有字体都小于其em方框,很多字体就是这样做的
因此font-size的作用是为给字体的em框提供一个大小
除了数值、百分数之外 还提控了xx-small x-small small medium large x-large xx-large,smaller和larger是相对于父元素的

  1. italic和oblique
    前者是斜体后者是倾斜的文本
    斜体是一种单独的字体风格,对每个字母的结构有一些小的改动,来反映变化的外观。
    倾斜文本则是正常竖直文本的一个倾斜版本。
    实际上并不是每个文本都提供了斜体和倾斜的字体,甚至即使这两种字体同时存在,也很少有浏览器复杂到足以区分他们
    如果有没有Italic字体,但是有一种Oblique字体,则要在需要前者的地方使用后者,如果情况反过来存在Italic字体,但是没有Oblique字体,根据规范,用户代理可能不会把后者换成前者,最后,用户代理可能只是计算竖直字体的一个倾斜文本来生成oblique字体。
    6.font-varint:small-caps
    将文本中的小写字母转换成小型的大写字母。
    与text-transform:uppercase很类似,唯一的区别在于,某些字体有特定的small-caps字体
    如果不存在这样的字体,规范中提供了两种选择,第一种是让用户代理里自己缩放大写字母来创建一个small-caps。第二种是让所有字体都大写。
    7.方面值
    影响字体是是否能辨识的因素包括其大小和器x-height。x-height除以font-size的结果称为方面值(aspect value)
    如果字体的方面值较高,随字体大小的减少这种字体往往还能辨识,反过来,如果字体的方面值较低,就会更快的变的不可辨识。
    x-height(简单理解为字母x的高度) https://en.fontke.com/article/706/?fromlang=zh_CN

相关文章

  • 2019-07-31

    啦啦啦啦 特大字体大字体大字体大字体大字体大大字体大字体大字体字体 大字体大字体大字体大字体大字体大大字体大字体大...

  • CSS字体

    Serif 字体 Sans-serif 字体 Monospace 字体 Cursive 字体 Fantasy 字体...

  • CSS字体

    字体 字体的样式 font-family Serif 字体 Sans-serif 字体 Monospace 字体...

  • 字体

    字体样式 1. 字体大小 2. 字体粗细 3. 字体类型 4. 字体风格 5. 字体颜色 - 字体大小 font-...

  • 中国书法基本种类

    书法字体,就是书法风格的分类。书法字体,传统讲共有篆书字体、楷书字体、隶书字体、草书字体和行书字体五种,也就是五个...

  • MarkDown使用

    1号字体 2号字体 3号字体 4号字体 5号字体 6号字体 无序排列 Hello World! Hello Wor...

  • CSS阶段三:文本,行内元素,行内块元素操作

    字体 color 字体颜色 font-size 字体大小 font-family 字体样式 serif 衬线字体 ...

  • 2018-07-16 MarkDown语法

    1.标题写法 #= ##= 以此类推 分割线


    *** 字体 字体加粗**字体**字体斜体***字体***字...

  • HTML(二)常用标签

    一、字体标签 字体标签 < fon...... 作用:规定文本的字体、字体尺寸、字体颜色 示例: [小贴士]在HT...

  • CSS font-family中文字体对应的英文名称一览表

    windows常见内置中文字体 OS X常见内置中文字体 office安装后新增字体 开源字体 版权字体 版权字体...

网友评论

    本文标题:字体

    本文链接:https://www.haomeiwen.com/subject/rtbbfftx.html