font

Web前端 来源:Hushaby丶 9℃ 0评论

font 属性是以下属性的缩写形式:font-style,font-variant,font-weight,font-stretch,font-size,line-height,font-family。

这里大家都很清楚了,我就不讲了。我只强调一点:系统字体只能使用 font 属性设置,而不能使用 font-family 属性。

此外,系统字体只能设置​​为一个整体。也就是说,字体族,大小,粗细,样式等都被同时设置。如果需要,然后可以单独地改变这些值。如果在给定平台上没有具有所指示特性的字体,则浏览器应该智能地替换(例如,“caption” 字体的较小版本可以用于 “small-caption” 字体),或者使用浏览器默认字体。

以上很重要!!!很重要!!!谨记。

接着我们分别来说吧。

font-style

font-style 属性允许选择斜体(italic)或斜体(oblique)字体。

它们的区别在于:斜体(italic)形式本质上通常是草书字体,而斜体(oblique)通常是正规面的倾斜形式。

它的参数是:normal | italic | oblique

这里我就哪一个例子来说,上面的使用的是 italic 参数值,下面的使用的是 oblique 参数值。


它们的区别大吗???因此我们不必太纠结它们的区别了。想用哪个就用哪个吧。


font-variant

字体系列中的一种类型的变体是 small-caps。 在 small-caps 字体中,小写字母看起来类似于大写字体,但是尺寸较小,比例稍有不同。 ont-variant 属性选择该字体。

在 CSS2 中,该值可以采用两个值之一:normal 和 small-caps 。“normal” 值选择不是小写字体的字体,“small-caps” 选择小写字体。如果字体没有小写字母变体,那么小写字体是通过采用正常字体并用小写字母替换小写字母创建的(但不是必需的)。作为最后一种手段,大写字母将被用作小写字体的替代。

它的参数值为:normal | small-caps | inherit


font-variant

各位看官,如果想思考的话。。我不会阻止。但记住,这个属性不会作用在中文上。

其实本质就是将所有字母变成小号的大写字母。


font-weight

一些字体家族通常具有不同格式(face),具有不同厚度或粗体的量;这个厚度被称为 CSS 中的 font-weight。

font-weight 属性用于选择字体的字体粗细(它们的黑度或粗细度)。

字体的权重通常由关键字或数字描述。数字是从 100 到 900 开始的有序序列,其中每个数字表示至少与其前身一样暗的权重。关键字被映射到适当的数字,例如,关键字 normal 与 “400” 同义,粗体与 “700” 同义。关键字是:normal, bold,bolder 和 lighter。

这里我就那张图出来吧。


基本来说,我们设定 400、700 和 900 这三个数的时候才有反应,而设置其他数时,并没有变化。

具体是使用关键字还是使用数字,这个取决于你。


font-stretch

font-stretch 属性允许我们从一个字体系列中选择一个正常,缩小或伸展的字体。这些被称为字体的“宽度”。

下图显示了九个 font-stretch 属性设置如何影响包含各种宽度的字体系列的字体选择,灰色表示没有进一步的宽度变化。


它的参数是:normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

我在 Chrome 浏览器上准备示例,结果没有反应。。想必它的兼容性还真的是问题啊,不过我们也基本不会用到它。作为了解吧。


font-size

font-size 属性用于设置字体的大小或高度。

这个属性我们都快用烂了吧,至今应该没有网页不使用它来控制字体大小吧?

因为 font-size 属性的值用于计算 em 和 ex 单位的值,所以 font-size 属性值还会影响页面上依赖于或使用 em 或 ex 单元的其他元素的大小。例如,如果元素的尺寸(高度和宽度)使用 em 长度单位指定,则元素上设置的字体大小将直接影响元素尺寸的计算长度,因为 em 和 ex 是相对单位,以及在 em 或 ex 中设置的尺寸是相对于元素上设置的字体大小。

字体大小可以指定为绝对值或相对值。绝对值可以使用预定义的关键字或 <length> 单位指定。相对值使用相对 <长度> 值或 <百分比> 值指定。不允许使用字体大小的负值。

我的建议是尽量使用相对字体大小。在现如今的网页设计中,过多地使用固定的 px 值可能会照成后期维护的成本大大增加。

它的属性值是:<absolute-size> | <relative-size> | <length> | <percentage> | inherit

嗯,它也没什么再扩展了啦?当然有,它有个单独的属性:font-size-adjust,它的作用就是使英文字母在垂直方向上拉长。我们也用不上它,所以不讲啦,感兴趣的可以自己搜一搜。


line-height

line-height 属性用于设置元素的行框的高度。它设置两条相邻线的基线之间的距离。

换句话说,它用于设置内联元素的上下空间量 —— 具有 display:inlinedisplay:inline-block 的元素。内容高度和指定的行高之间的差异称为“前导”(leading)。

line-height 属性广泛用于设置文本行的开头。如果行高值大于元素的 font-size 的值,则行高的值和字体大小的值之间的差是文本的前导。前导被切成两半(产生“半前导”)并分布在内联内容的顶部和底部,因此内联元素在线框内居中(除非使用 vertical-align 属性更改对齐方式) 。如果 line-height 属性的值小于 font-size 的值,则文本可能溢出该元素,并且一行上的文本可能与另一行上的文本重叠。

line-height 属性可以采用关键字值(normal),也可以使用数字,长度或百分比值进行设置。当它需要一个数值时,它被称为具有一个“无单位”值,通常优先于单位值。行高级联,因此元素的后代将从其父代继承计算的值,并且此计算的值可能不适合应用于它们的字体大小,并且您可能会遇到意想不到的行为。

因此,作为一般的建议,总是更倾向使用无单位行高。

它的参数是:normal | <number> | <length> | <percentage> | inherit

其实这个属性如果我们深究,可以讨论关于顶线、基线等,但是中文和英文不一样,没有这些东西,因此,我还是不打算讲了吧。

我只说一个大家经常用到的:

使用了一个 p 标签,给它加了边框后,它的显示如下。


如果我们需要文字垂直居中的话,就可以使用它。

p {
  line-height: 30px;
}

也就是将行高与元素的高度设置为同一个值。

这样,就实现垂直居中的效果了。



font-family

font-family 属性指定要用于元素内容的字体系列。

更具体地,其定义要使用的字体系列名称和(或)通用家族名称的优先级列表。指定的字体系列名称由逗号分隔,表明它们是彼此的替代。排在前面的字体优先使用,如果在浏览器中不能使用它,则使用下一个字体,以此类推。。。最后,如果都不能使用,那么就会使用浏览器默认的字体。

示例:

font-family: Helvetica, Verdana, sans-serif;

此外,我们还可以使用 @font-face 规则设置我们自己的字体样式。本系列的最后会讲到。

为避免转义时出现错误,如果系列名称包含多个字词(以连字符以外的空格,数字或标点符号分隔),建议使用引号(单引号或双引号)来列出该字体家族的名称。

其他的好像就没什么可讲的了?

看起来这个 font 缩写属性有很多属性,但是我们最常用的也就是下面的形式:

font: 24px/1.5 Helvetica, Verdana, sans-serif;

这是最基础的,其它前面的属性,可以根据实际情况再进行添加。

本节就到此结束啦!