CSS系列之字体相关的样式

2022/1/19 6:09:10

编程Tag： 属性 css 样式字体 Font variant OpenType ligatures

本文主要是介绍CSS系列之字体相关的样式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1、font-size 字体大小

①、xx-small，x-small，small，medium，large，x-large，xx-large

绝对大小关键字定义相对于用户的默认字体大小(medium)

  <div>天道酬勤</div>
  <div style="font-size: xx-small;">追梦无疆</div>

在这里插入图片描述

②、larger，smaller

比父元素的字体大或小，使用与上面的关键字的相近缩放比率。

  <div>天道酬勤</div>
  <div style="font-size: larger;">追梦无疆</div>

在这里插入图片描述

③、length

由一个数字（正数）和一个长度单位构成。

当单位为 em 或 ex 时，大小为相对于父元素的文字的大小。

<body style="font-size: 2px;">
  <div style="font-size: 9em;">天道酬勤</div>
</body>

在这里插入图片描述

单位

在这里插入图片描述

④、percentage

一个具体数值后跟着 % 符号构成。

父元素字体大小的正数

注意

我们文字大小以后，基本就用 px 了，其他单位很少使用；
谷歌浏览器默认的文字大小为 16px；
但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给 body 指定整个页面文字的大小；

2、font-family 字体

2.1、属性值

2.1.1、family-name

一个字体族的名字，字体族名可以包含空格，但包含空格时应该用引号；

2.1.2、generic-name

通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字，所以不可以加引号。在列表的末尾应该至少有一个通用字体族名。

2.1.2.1、serif

带衬线字体，笔画结尾有特殊的装饰线或衬线。
例如： Lucida Bright, Lucida Fax, Palatino, “Palatino Linotype”, Palladio, “URW Palladio”, serif

2.1.2.2、sans-serif

无衬线字体，即笔画结尾是平滑的字体。
例如， “Open Sans”，“Fira Sans”，“Lucida Sans”，“Lucida Sans Unicode”，“Trebuchet MS”，“Liberation Sans”，“Nimbus Sans L”，sans-serif

2.1.2.3、monospace

等宽字体，即字体中每个字宽度相同。
例如， “Fira Mono”，“DejaVu Sans Mono”，Menlo，Consolas，“Liberation Mono”，Monaco，“Lucida Console”，monospace

2.1.2.3、cursive

草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。
例如，“Brush Script MT”，“Brush Script Std”，“Lucida Calligraphy”，“Lucida Handwriting”，“Apple Chancery”，cursive

2.1.2.5、fantasy

Fantasy 字体主要是那些具有特殊艺术效果的字体。
例如，Papyrus，Herculanum，Party LET，Curlz MT，Harrington，fantasy

2.1.2.6、system-ui

从浏览器所处平台处获取的默认用户界面字体。由于世界各地的排版习惯之间有很大的差异，这个通用选项为不能清晰地映射到其他泛型的字体提供的。

2.1.2.7、math

针对显示数学相关字符的特殊样式问题而设计的字体：支持上标和下标、跨行括号、嵌套表达式和具有不同含义的双重符号。

2.1.2.8、emoji

专门用于呈现 Emoji 表情符号的字体。

2.1.2.9、fangsong

一种汉字字体，介于宋体和楷体之间。这种字体常用于某些政府文件。

2.1、注意

属性值用逗号隔开；
至少在使用 font-family 时添加一个通用的字体族名；

3、font-weight 字体粗细

3.1、属性值

3.1.1、normal

正常粗细，与 400 等值。

3.1.2、bold

加粗，与 700 等值。

3.1.3、lighter

比从父元素继承来的值更细。

3.1.4、bolder

比从父元素继承来的值更粗。

在这里插入图片描述

3.1.5、

一个介于1和1000（包含）之间的数字。

在这里插入图片描述

4、font-style 字体风格

4.1、属性值

4.1.1、normal

选择 font-family 的常规字体

4.1.2、italic

斜体，如果当前字体没有可用的斜体版本，会选择倾斜体代替。

4.1.3、oblique

选择倾斜体，如果当前字体没有可用的倾斜体版本，会用斜体代替。当前属性值后面可以紧跟一个角度（-90°~90°）。

font-style: oblique 10deg;

5、font-variant-caps

可以控制大写字母特殊字符的使用。

如果项目的字体库中包含不同大小的大写字母特殊字符，该属性将选择其中最接近指定大小的字符。

5.1、用途

这一属性被用来指定各种语言特定的映射规则。

在突厥语系中 - 比如土耳其语（ISO 639-1代码tr）、阿塞拜疆语（ISO 639-1代码az）、克里米亚鞑靼语（ISO 639-3代码crh）、鞑靼语（ISO 639-1代码tt）和巴什基尔语（ISO 639-1代码ba），有两种发音近似的i字母（区别在于一种有顶部的.，另一种没有），而它们的大小写写法也有区别：一种是i/İ，另一种是ı/I。
在德语（ISO 639-1代码de）中，ß 的大写可能会被写作ẞ（收录于通用字符集U+1E9E）。
在希腊语（ISO 639-1代码el）中，如果整个单词是大写的（ά/Α），元音将失去重音。（分离字母eta （ή/Ή）除外。）除此之外，重音在第一个元音的双元音将失去重音，并被在第二个元音上加上一个变音符（άι/ΑΪ）。

5.2、属性值

5.2.1、normal

关闭一切特殊字符变体的使用。

5.2.2、small-caps

允许小型大写字母的使用。小型大写字母指使用大写形式，但尺寸与对应小写字母相同的字母。

5.2.3、all-small-caps

将大小写字母全部转化为小型大写字母。

5.2.4、petite-caps

允许特小型大写字母的使用

5.2.5、all-petite-caps

将大小写字母全部转化为小型大写字母。

5.2.6、unicase

允许将大写字母转化为小型大写字母与普通小写字母的混用。

5.2.7、titling-caps

允许首字母大写。大写字母变体字符通常被设计成与用于小写字母。在标题序列中，如果均使用大写字母，可能会带来过于强烈的视觉效果。首字母大写即用来应对这种情况。

6、font-variant-numeric

控制数字，分数和序号标记的替代字形的使用。

6.1、属性值的指定方式

关键字值 normal；
或下列的一个或多个其他值，按任意顺序排列并以空格分隔；

6.2、属性值

6.2.1、normal

下列特性均不启用。

6.2.2、ordinal

启用序数形式显示。对序号标记强制启用特殊字形，等同于 OpenType 特性 ordn。

6.2.3、slashed-zero

启用区分零显示。强制使用带有斜杠的 0；常用于区分 O 和 0。等同于 OpenType 特性 zero。

6.2.4、`<numeric-figure-values>`

下列值用于控制数字样式，可用值如下：

lining-nums 启用内衬数字显示。使数字全部对齐到基线。等同于 OpenType 特性 lnum。
oldstyle-nums 启用旧式数字显示。部分数字如 3、4、7、9 会有下沉。等同于 OpenType 特性 onum。

6.2.5、`<numeric-spacing-values>`

下列值用于控制数字宽度，可用值如下：

proportional-nums 启用比例数字显示。使数字变成基于字形本身形状下的特定宽度表现。等同于 OpenType 特性 pnum。
tabular-nums 启用表格数字显示。使数字等宽，易于像表格那样对齐。等同于 OpenType 特性 tnum。

6.2.6、`<numeric-fraction-values>`

下列值用于控制分数字形，可用值如下：

diagonal-fractions 启用斜角分数显示。使分子和分母变成像下标字，并用变长的斜线分隔。等同于 OpenType 特性 frac。
stacked-fractions 启用标准分数显示。使分子在上，分母在下，并用水平线分隔。等同于 OpenType 特性 afrc。

7、font-variant-alternates

控制备用字体的使用。

7.1、属性值的指定方式

默认值 normal
一个或多个关键词及函数，使用任意顺序用空格分隔。

7.2、属性值

7.2.1、normal

此关键字禁用备用字体。

7.2.2、historical-forms

此关键字启用历史类型-过去常见但今天不常见的字体。它对应于OpenType值 hist。

7.2.3、stylistic()

此函数可以为个别字体启用字体样式替换。该参数是特定于字体映射到数字的名称。它对应于OpenType值 salt。

7.2.4、styleset()

此函数可以对字符集启用字体样式替换。该参数是特定于字体映射到数字的名称。它对应于OpenType的值 ssXY。

7.2.5、character-variant()

此函数启用字符的特定样式替代。它与styleset（）类似，但是不会为一组字符创建连贯的字形；单个字符将具有独立且不一定一致的样式。该参数是映射到数字的特定于字体的名称。它对应于OpenType值 cvXY，例如cv02。

7.2.6、swash()

此函数启用斜字体。该参数是特定于字体映射到数字的名称。它对应于 OpenType 值 swsh 和 cswh，例如swsh 2 和cswh 2。

7.2.7、ornaments()

此函数可启用装饰物，例如 fleurons 与其他 dingbat 字形。该参数是特定于字体映射到数字的名称。它对应于 OpenType 值 ornm，例如 ornm 2。
注意: 为了保留文本语义，字体设计师应该包括与 Unicode dingbat 字符不匹配的装饰，作为项目符号字符（U + 2022）的装饰变体。请注意，某些现有字体不遵循此建议。

7.2.8、annotation()

此函数支持注释，如带圆圈的数字或倒置的字符。该参数是特定于字体映射到数字的名称。它对应于OpenType值nalt，例如 nalt 2。

8、font-variant-ligatures

控制着其所应用元素文本的 ligatures 与 contextual forms 。会使文字最终的表现形式更加统一。

8.1、属性值

8.1.1、normal

默认值，表示在渲染时会使用常用的连字，连字的效果取决于字体，语言和脚本。

8.1.2、none

不使用任何连字，包括常规的形式

8.1.3、`<common-lig-values>`

这些值控制最常见的连接，如fi，ffi，th或类似的。它们对应于 OpenType 的值 liga 和clig。可能有两个值：

common-ligatures

激活这些连接

no-common-ligatures

不激活这些连接

8.1.4、`<discretionary-lig-values>`

这些值控制特定的连接，特定于字体并由类型设计器定义。它们对应于OpenType值dlig。可能有两个值：

discretionary-ligatures

激活这些连接

no-discretionary-ligatures

不激活这些连接

8.1.5、`<historical-lig-values>`

这些值控制历史上使用的连接，如在古书中显示的德语 tz为 ꜩ。它们对应于 OpenType 值 hlig。可能有两个值:

historical-ligatures

激活这些连接

no-historical-ligatures

不激活这些连接

8.1.6、`<contextual-alt-values>`

这些值控制字母是否适应其上下文—也就是说，它们是否适应周围的字母。这些值对应于OpenType 值 calt。可能有两个值：

contextual specifies

需要使用上下文替代。

no-contextual

防止使用

9、font-variant-east-asian

控制东亚脚本中替换符号的使用

9.1、属性值

9.1.1、normal

这个关键字会导致这种替换符号的停用

9.1.2、ruby

这个关键字强制为 ruby 字符使用特殊的符号。由于这些字体通常都比较小，字体设计者通常会设计特定的表单，通常会稍微大胆一些，以提高对比度。这个关键字对应于OpenType 值 ruby。

9.1.3、`<east-asian-variant-values>`

这些值指定一组应该用于显示的逻辑符号变体。可能的值是：
在这里插入图片描述

9.1.4、`<east-asian-width-values>`

这些值控制用于东亚字符的数字的大小。可能有两个值：

proportional-width

激活宽度不同的一组东亚字。它对应于 OpenType 值 pwid。

full-width

激活一组东亚字符，这些字符都是相同的，大致是方形的，宽度公制的。它对应于 OpenType 值 fwid。

10、font-variant

是上述5，6，7，8，9的简写。

10.1、属性值

10.1.1、normal

10.1.2、none

将font-variant-ligatures设定为 none ，将其他非简写属性的值设定为初始值normal。

10.1.3、`<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>`

规定与 font-variant-ligatures 属性相关的关键字，可能的值包括： common-ligatures，no-common-ligatures，discretionary-ligatures，no-discretionary-ligatures，historical-ligatures，no-historical-ligatures，contextual 和 no-contextual。

10.1.4、stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation()

规定与 font-variant-alternates 属性相关的关键字和函数。

10.1.5、small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps

规定与 font-variant-caps 属性相关的关键字和函数。

10.1.6、`<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero`

规定与 font-variant-alternates 属性相关的关键字，可能的值包括：lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal 和 slashed-zero。

10.1.7、`<east-asian-variant-values>, <east-asian-width-values>, ruby`

规定与 font-variant-east-asian (en-US) 属性相关的关键字，可能的值包括：jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby。

11、line-height

用于设置多行元素的空间量。

11.1、属性值

11.1.1、normal

取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2，这取决于元素的 font-family。

11.1.2、`<数字>`

该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置 line-height 的推荐方法，不会在继承时产生不确定的结果。

11.1.3、`<长度>`

指定<长度>用于计算 line box 的高度。以 em 为单位的值可能会产生不确定的结果。

11.1.4、`<百分比>`

与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果。

11.1.5、-moz-block-height

将行高设置为当前块的内容区域高度。

12、font

用来作为 font-style，font-variant，font-weight，font-size，line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。

12.1、简写的要求

必须包含以下值：

<font-size>
<font-family>

可以选择性包含以下值：

<font-style>
<font-variant>
<font-weight>
<line-height>

font-style，font-variant 和 font-weight 必须在 font-size 之前
在 CSS 2.1 中 font-variant 只可以是 normal 和 small-caps
line-height 必须跟在 font-size 后面，由 “/” 分隔，例如 “16px/3”
font-family 必须最后指定

12.2、系统字体属性

12.2.1、caption

用于标题控件（如按钮，下拉列表等）的系统字体。

12.2.2、icon

用于标签图标的系统字体。

12.2.3、menu

菜单中（如下拉菜单和菜单列表）使用的系统字体。

12.2.4、message-box

用于对话框的系统字体。

12.2.5、small-caption

用于小标题控件的系统字体。

12.2.6、status-bar

用于窗口状态栏的系统字体。

12.2.7、系统关键字前缀

浏览器经常会多实现几个带前缀的关键字；Gecko 实现了 -moz-window，-moz-document，-moz-desktop，-moz-info，-moz-dialog，-moz-button，-moz-pull-down-menu，-moz-list 和 -moz-field。

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

在这里插入图片描述

这篇关于CSS系列之字体相关的样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS系列之字体相关的样式

1、font-size 字体大小

①、xx-small，x-small，small，medium，large，x-large，xx-large

②、larger，smaller

③、length

单位

④、percentage

2、font-family 字体

2.1、属性值

2.1.1、family-name

2.1.2、generic-name

2.1.2.1、serif

2.1.2.2、sans-serif

2.1.2.3、monospace

2.1.2.3、cursive

2.1.2.5、fantasy

2.1.2.6、system-ui

2.1.2.7、math

2.1.2.8、emoji

2.1.2.9、fangsong

2.1、注意

3、font-weight 字体粗细

3.1、属性值

3.1.1、normal

3.1.2、bold

3.1.3、lighter

3.1.4、bolder

3.1.5、

4、font-style 字体风格

4.1、属性值

4.1.1、normal

4.1.2、italic

4.1.3、oblique

5、font-variant-caps

5.1、用途

5.2、属性值

5.2.1、normal

5.2.2、small-caps

5.2.3、all-small-caps

5.2.4、petite-caps

5.2.5、all-petite-caps

5.2.6、unicase

5.2.7、titling-caps

6、font-variant-numeric

6.1、属性值的指定方式

6.2、属性值

6.2.1、normal

6.2.2、ordinal

6.2.3、slashed-zero

6.2.4、<numeric-figure-values>

6.2.5、<numeric-spacing-values>

6.2.6、<numeric-fraction-values>

7、font-variant-alternates

7.1、属性值的指定方式

7.2、属性值

7.2.1、normal

7.2.2、historical-forms

7.2.3、stylistic()

7.2.4、styleset()

7.2.5、character-variant()

7.2.6、swash()

7.2.7、ornaments()

7.2.8、annotation()

8、font-variant-ligatures

8.1、属性值

8.1.1、normal

8.1.2、none

8.1.3、<common-lig-values>

8.1.4、<discretionary-lig-values>

8.1.5、<historical-lig-values>

8.1.6、<contextual-alt-values>

9、font-variant-east-asian

9.1、属性值

9.1.1、normal

9.1.2、ruby

9.1.3、<east-asian-variant-values>

9.1.4、<east-asian-width-values>

10、font-variant

10.1、属性值

10.1.1、normal

6.2.4、`<numeric-figure-values>`

6.2.5、`<numeric-spacing-values>`

6.2.6、`<numeric-fraction-values>`

8.1.3、`<common-lig-values>`

8.1.4、`<discretionary-lig-values>`

8.1.5、`<historical-lig-values>`

8.1.6、`<contextual-alt-values>`

9.1.3、`<east-asian-variant-values>`

9.1.4、`<east-asian-width-values>`

10.1.3、`<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>`

10.1.6、`<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero`

10.1.7、`<east-asian-variant-values>, <east-asian-width-values>, ruby`

11.1.2、`<数字>`

11.1.3、`<长度>`

11.1.4、`<百分比>`