CSS常用样式--font

CSS font 属性

参考:W3school- CSS font

所有浏览器都支持 font 属性,可在一个声明中设置所有字体属性,各属性需按顺序,语法如下:

selector{
  font:style weight size/line-height font-family
}

常用值:

描述
font-style 规定字体样式
font-weight 规定字体粗细
font-size/line-height 规定字体尺寸和行高
font-family 规定字体系列
font-variant 规定字体异体

  


具体如下:

font-style

所有主流浏览器都支持 font-style 属性。

定义字体的风格,可设置使用斜体、倾斜或正常字体。

js语法:object.style.fontStyle="italic"。

可能的值:

font-weight

所有主流浏览器都支持 font-weight 属性。

用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal,700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细,而且至少与下一个最大数字一样粗。

js语法:object.style.fontWeight="900"。

可能的值:

font-size/line-height

所有主流浏览器都支持 font-size 属性。

设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。

js语法:object.style.fontSize="larger"。

可能的值:

所有浏览器都支持 line-height 属性。

设置行间的距离(行高),不允许使用负值。该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

js语法:object.style.lineHeight="2"。

可能的值:

font-family

所有主流浏览器都支持 font-family 属性。

规定元素的字体系列,font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

有两种类型的字体系列名称:

  • 指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial"。
  • 通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

注意:使用逗号分割每个值,并始终提供一个类族名称作为最后的选择。

js语法:object.style.fontFamily="arial,sans-serif"。

可能的值:

font-variant

所有主流浏览器都支持 font-variant 属性。

设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

js语法:object.style.fontVariant="small-caps"。

可能的值:

原文地址:https://www.cnblogs.com/Amy-world/p/9930489.html