CSS教程

CSS系列之字体相关的样式

本文主要是介绍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

由一个数字(正数)和一个长度单位构成。

当单位为 emex 时,大小为相对于父元素的文字的大小。

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

在这里插入图片描述

单位

在这里插入图片描述

④、percentage

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

父元素字体大小的正数

注意

  1. 我们文字大小以后,基本就用 px 了,其他单位很少使用;
  2. 谷歌浏览器默认的文字大小为 16px;
  3. 但是不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。一般给 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、注意

  1. 属性值用逗号隔开;
  2. 至少在使用 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、属性值的指定方式

  1. 关键字值 normal
  2. 或下列的一个或多个其他值,按任意顺序排列并以空格分隔;

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系列之字体相关的样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!