HTML与CSS——CSS字体样式

HTML与CSS——CSS字体样式

字体样式

CSS 提供了很多属性来控制字体的外观。

常用属性有：

• font-size：设置字体大小。
• font-family：设置字体类型。
• font-weight：设置字体粗细。
• Font-style: 设置字体风格，例如斜体和倾斜字体
• color：设置字体颜色。
• text-decoration：设置字体修饰。

例如：

p {
  font-size: 16px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: blue;
  text-decoration: underline;
}

这段代码将所有的 p 元素设置为 Arial 字体，16px 大小，粗体，蓝色

字体类型

font-family

font-family 属性是用来设置字体的类型。它可以是一个具体的字体名称，也可以是一组字体名称，用于在浏览器不能使用第一个字体时选择其他字体。

例如：

p {
  font-family: Arial, sans-serif;
}

这段代码将所有的 p 元素设置为 Arial 字体，如果浏览器不支持 Arial 字体，那么会选择 sans-serif 字体。

需要注意的是，不是所有的字体都可以在所有的设备上使用。

在 font-family 属性中，最后一个字体通常是一种通用字体，它用来在浏览器不能使用前面指定的字体时作为备选字体。

通用字体类型有 serif,sans-serif,monospace,cursive，fantasy。这些字体在大部分的设备上都有支持。

serif, sans-serif, monospace, cursive, fantasy 是 CSS 中的五种通用字体类型。

• serif 字体有细的线条（称为“衬线”）在字母的结尾处，常见的 serif 字体有 Times New Roman, Georgia 等。
• sans-serif 字体没有衬线，常见的 sans-serif 字体有 Arial, Helvetica 等。
• monospace 字体中，每个字符占据相同的空间，常见的 monospace 字体有 Courier New, Consolas 等。
• cursive 字体是手写风格的字体，常见的 cursive 字体有 cursive, Comic Sans MS 等。
• fantasy 字体是装饰风格的字体，常见的 fantasy 字体有 fantasy, Impact 等。

在使用时，使用 serif 和 sans-serif 作为主要字体，因为它们在大部分的设备上都有很好的支持。而 monospace, cursive, fantasy 可以用来辅助设计，而非主要字体。

总之，在 font-family 中指定通用字体是一种最佳实践，因为它可以保证在大部分的设备上都能正确的显示文本。

@font-face

@font-face 是 CSS3 中的一种特殊规则，用来引入外部字体文件并使用它们控制字体的外观。

使用 @font-face 规则的方法是在 CSS 中添加一个 @font-face 规则，并在规则中指定字体文件的 URL。

例如：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff');
}

p {
  font-family: 'MyFont';
}

这段代码会引入名为 myfont.woff 的字体文件，并将其命名为 MyFont。然后你可以在 CSS 中使用 font-family: ‘MyFont’; 为元素应用该字体。

需要注意的是，不同的浏览器支持的字体文件格式不同，所以最好提供多种格式的字体文件以确保在所有浏览器上都能正常使用。常见的字体格式有 woff, woff2, ttf, eot。

使用 @font-face 规则可以让你在网页中使用任何字体，而不只是系统中已安装的字体，是一种很好的控制字体外观的方式。

需要注意的是，有些字体文件可能有版权限制，在使用之前需要确认版权，是否能够免费使用。

此外，还可以使用第三方字体库来获取字体文件，例如Google Fonts, Adobe Typekit等。这些字体库提供了大量的免费字体可供选择，可以避免版权问题。

总之，使用 @font-face 规则可以让你在网页中使用任何字体，提高网页的视觉效果。但要注意版权问题，建议使用免费字体库。

字体大小

在 CSS 中，font-size 属性可以使用以下几种方式指定字体大小：

• 像素值 (px)： 像素是一种固定的单位，可以精确地指定字体大小。例如： font-size: 16px; 会将字体大小设置为 16 像素。
• 相对单位 em： em 是一种相对单位，相对于父元素的字体大小。例如： font-size: 1.2em; 会将字体大小设置为父元素字体大小的 1.2 倍。
• 相对单位 rem: rem 是一种相对单位，相对于根元素（）的字体大小。例如： font-size: 1.2rem; 会将字体大小设置为根元素字体大小的 1.2 倍。
• 百分比： 可以使用百分比来指定字体大小，相对于父元素的字体大小。例如： font-size: 120%; 会将字体大小设置为父元素字体大小的 120%。
• 关键字： 使用关键字来指定字体大小，有 xx-small, x-small, small, medium, large, x-large, xx-large 共7种。

在使用时，最佳实践是使用 rem 来指定字体大小，因为它是相对于根元素的字体大小，可以方便地更改整个页面的字体大小。

设置默认字体大小为 16px，并使用 rem 作为单位来控制其它元素的字体大小。

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1.2rem;
}

在这个例子中，我们将根元素的字体大小设置为 16px。然后使用 rem 作为单位，将 h1 元素的字体大小设置为 2rem，也就是 32px。 p 元素的字体大小设置为 1.2rem，也就是 19.2px。

这样做的好处是，如果我们需要更改页面的默认字体大小，只需要修改根元素的字体大小即可，而不用修改每个元素的字体大小。

还有一点需要注意的是，在使用 rem 作为单位时，需要在低版本浏览器上设置默认字体大小，否则可能会出现显示问题。

字体粗细

font-weight 属性用于控制字体的粗细。

常用的值有：

• normal: 默认值，表示普通的字体粗细
• bold: 粗体
• bolder: 比 bold 更粗
• lighter: 比 normal 更细
• 100~900: 数字越大，字体越粗

例如：

h1 {
  font-weight: bold;
}
p {
  font-weight: lighter;
}

这段代码将 h1 元素的字体设置为粗体，p 元素的字体设置为更细的字体。

在使用时，最佳实践是使用关键字（normal, bold, bolder, lighter）来控制字体粗细。

字体倾斜

font-style 属性用于控制字体的斜体样式。

常用的值有：

• normal: 默认值，表示普通的字体样式
• italic: 斜体
• oblique: 倾斜

例如：

h1 {
  font-style: italic;
}
p {
  font-style: oblique;
}

这段代码将 h1 元素的字体设置为斜体，p 元素的字体设置为倾斜字体。

italic 和 oblique 都是用来控制字体样式的，但是它们有一些区别。

• italic 是一种真正的斜体字体，它通常是由字体设计师专门设计的，并且通常会有一些特殊的笔画和字形设计。
• oblique 是一种通过软件将正常字体倾斜得到的样式。它不是真正的斜体字体, 是一种伪斜体字体，没有特殊的字形设计。

一般来说，如果字体本身没有斜体版本，浏览器会使用 oblique 来模拟斜体。

总之, italic 是一种真正的斜体字体，它通常是由字体设计师专门设计的，而 oblique 是一种通过软件将正常字体倾斜得到的样式，是一种伪斜体字体。在使用时，建议优先使用 italic，如果没有斜体版本就用 oblique。

字体颜色

字体颜色是指文本内容的颜色。CSS 中可以使用 color 属性来控制字体颜色。

color 属性接受以下几种值：

• 颜色名称：如 red, blue, green 等
• RGB 值：rgb(255,0,0)表示红色，rgb(0,0,255)表示蓝色
• HEX 值：#FF0000 表示红色，#0000FF 表示蓝色

例如：

p {
  color: blue;
}

h1 {
  color: #FF0000;
}

这段代码将 p 元素的字体颜色设置为蓝色，h1 元素的字体颜色设置为红色。

在使用时，最佳实践是使用 HEX 值来指定字体颜色，因为 HEX 值可以精确表示颜色，在不同浏览器上显示效果一致。

字体修饰

text-decoration 属性用于设置字体修饰，可以在文本中添加线条，如下划线、删除线等。

常用的值有：

• none: 默认值，不显示修饰线
• underline: 下划线
• overline: 上划线
• line-through: 中划线
• blink: 闪烁的修饰线

例如：

h1 {
  text-decoration: underline;
}
p {
  text-decoration: line-through;
}

这段代码将 h1 元素的字体添加下划线，p 元素的字体添加中划线。