在CSS中如何设置字体样式

一、设置字体样式的基本语法

CSS中设置字体样式的基本语法如下:

  font: font-style font-variant font-weight font-size/line-height font-family;

其中,font-size, font-family是必填项,其他项都可以不填。

font-style: 设置字体风格,有常规、斜体、倾斜等样式可选,常规为 normal,斜体为 italic,倾斜为 oblique

font-variant: 设置字体变体,有普通和小型大写字母两种样式可选,普通为 normal,小型大写字母为 small-caps

font-weight: 设置字体粗细,有常规、粗体等样式可选,常规为 normal400,粗体为 bold700。在常规和粗体之间还有其他的取值,如100表示 thin900表示 black等。

font-size/line-height: 设置字体大小和行高,字体大小可以是固定大小的数值或相对于父元素的大小,行高可以是数值、百分比或relative关键字。

font-family: 设置字体族,可以设置多个字体族,用逗号分开,如果某个字体族不存在,则往后继续寻找下一个字体族,直到找到可用字体族为止。

例如,可以通过下面的代码设置一个斜体、粗体、20px大小、Times New Roman字体的文本样式:

  font: italic bold 20px/1.5 'Times New Roman', serif;

二、设置字体大小和行高

在CSS中,可以通过font-size属性来设置字体大小,字体大小可以是固定大小的数值或相对于父元素的大小。

例如,设置文本大小为14像素:

  font-size: 14px;

设置文本大小为父元素大小的50%:

  font-size: 50%;

除了font-size属性,还可以使用line-height属性来设置行高,行高可以是数值、百分比或relative关键字。

例如,设置文本行高为1.5:

  line-height: 1.5;

三、设置字体粗细和风格

在CSS中,可以通过font-weight属性设置字体粗细,取值为常规、粗体、thin、medium等。

例如,设置文本为粗体:

  font-weight: bold;

除了font-weight属性,还可以使用font-style属性来设置字体风格,可选值有常规、斜体、倾斜等。

例如,设置文本为斜体:

  font-style: italic;

四、设置字体族

在CSS中,可以通过font-family属性设置字体族,如果某个字体族不存在,则往后继续寻找下一个字体族,直到找到可用字体族为止。

例如,设置文本字体为Arial:

  font-family: Arial, sans-serif;

上面代码中,“sans-serif”是通用字体族,如果浏览器中没有Arial字体,则会自动选择系统中能用的通用字体族。

五、其他字体样式设置

在CSS中,还可以通过font-variant属性设置小型大写字母等字体变体,或通过text-transform属性将文本变换为大写、小写或首字母大写等。

例如,将文本转换为小型大写字母:

  font-variant: small-caps;

将文本转换为大写:

  text-transform: uppercase;

完整的样式代码:

  h1 {
    font: italic bold 30px/1.5 'Times New Roman', serif;
  }

  body {
    font-size: 14px;
    font-family: Arial, sans-serif;
  }

本文链接:https://my.lmcjl.com/post/20354.html

展开阅读全文

4 评论

留下您的评论.