标签引用外部CSS文件来定义字体样式，或使用`标签在HTML文档内部直接编写CSS。HTML中引用字体样式有多种方法,以下是详细的介绍：
使用HTML标签直接设置字体样式
HTML本身提供了一些标签来设置文本的字体样式,不过这些标签现在已经不太推荐使用，因为它们不符合现代网页设计的最佳实践，但为了完整性还是在这里提及。
| 说明 | 示例 | |
|---|---|---|
<font> |
用于设置文本的字体、字号和颜色等属性，不过这是一个过时的标签，在HTML5中已不被支持。 | <font face="Arial" size="4" color="red">这是红色的Arial字体文本</font> |
使用CSS内联样式
CSS（层叠样式表）是控制网页外观的强大工具，内联样式是将CSS样式直接写在HTML元素的style属性中。
设置字体类型
通过font family属性来指定字体类型，可以设置多个字体名称作为备选，浏览器会按照顺序选择可用的字体。
<p style="font-family: 'Arial', sans-serif;">这段文本将首先尝试使用Arial字体，如果系统中没有该字体，则会使用无衬线字体（sans serif）作为替代。</p>
设置字体大小
使用font size属性来设置字体大小，可以使用像素（px）、百分比（%）、em或rem等单位。
- 像素（px）：是一种固定的单位，如
font size: 16px;表示字体大小为16像素。 - 百分比（%）：是相对于父元素的字体大小而言的，如果父元素字体大小为16px，
font size: 120%;则表示子元素字体大小为19.2px。 - em：是相对于当前元素的字体大小。
font size: 1em;表示和当前元素的字体大小相同，font size: 1.5em;表示当前元素字体大小的1.5倍。 - rem：是相对于根元素（通常是
<html>元素）的字体大小，如果根元素字体大小为16px，font size: 1rem;就是16px，font size: 2rem;就是32px。
示例：
<p style="font-size: 18px;">这段文本字体大小为18像素。</p> <p style="font-size: 120%;">这段文本字体大小是父元素字体大小的120%。</p> <p style="font-size: 1.5em;">这段文本字体大小是当前元素字体大小的1.5倍。</p> <p style="font-size: 2rem;">这段文本字体大小是根元素字体大小的2倍。</p>
设置字体颜色
通过color属性来设置字体颜色，可以使用颜色名称（如red、blue等）、十六进制值（如#FF0000代表红色）、RGB值（如rgb(255,0,0)代表红色）或HSL值（如hsl(0,100%,50%)代表红色）来表示颜色。
示例：
<p style="color: red;">这段文本颜色为红色。</p> <p style="color: #0000FF;">这段文本颜色为蓝色（十六进制表示）。</p> <p style="color: rgb(0,128,0);">这段文本颜色为绿色（RGB表示）。</p> <p style="color: hsl(120,100%,50%);">这段文本颜色为绿色（HSL表示）。</p>
设置字体粗细
使用font weight属性来设置字体粗细，常见的值有normal（正常粗细，相当于400）、bold（粗体，相当于700），也可以使用具体的数字（100 900之间的整数，100最细，900最粗）。
示例：
<p style="font-weight: bold;">这段文本是粗体。</p> <p style="font-weight: 600;">这段文本字体粗细为600。</p>
设置字体风格
通过font style属性来设置字体风格，主要有两个值：normal（正常风格）和italic（斜体）。
示例：
<p style="font-style: italic;">这段文本是斜体。</p>
使用内部样式表（在<head>部分的<style>标签中）
内部样式表是将CSS样式写在HTML文档的<head>部分的<style>标签中，这样可以对整个文档中的多个元素应用相同的样式。
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: 'Times New Roman', serif;
font-size: 16px;
color: #333333;
font-weight: normal;
font-style: normal;
}
.special {
font-family: 'Courier New', monospace;
font-size: 18px;
color: #FF6600;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<p>这是一段普通段落，使用了内部样式表中定义的p标签样式。</p>
<p class="special">这是一段特殊样式的段落，使用了内部样式表中定义的.special类样式。</p>
</body>
</html>
在这个例子中,所有<p>标签都会应用第一种样式，而带有class="special"的<p>标签会应用第二种样式。
使用外部样式表
外部样式表是将CSS代码写在一个单独的.css文件中，然后在HTML文档中通过<link>标签引入，这种方法可以实现样式和内容的分离，方便多个页面共享相同的样式。
- 创建外部样式表文件
创建一个名为styles.css的文件，内容如下：
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #333333;
}
h1 {
font-family: 'Georgia', serif;
font-size: 24px;
color: #003366;
font-weight: bold;
}
.highlight {
font-family: 'Verdana', sans-serif;
font-size: 18px;
color: #FF0000;
font-style: italic;
}
- 在HTML文档中引入外部样式表
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>这是一个标题</h1> <p>这是一段正文内容，使用了外部样式表中定义的body样式。</p> <p class="highlight">这是一段高亮显示的文本，使用了外部样式表中定义的.highlight类样式。</p> </body> </html>
使用Web字体
我们可能需要使用一些特殊的字体,这些字体可能不在用户系统的默认字体列表中，这时可以使用Web字体。
使用Google Fonts
Google Fonts是一个提供大量免费字体的库，以下是使用Google Fonts的步骤：
-
在HTML文档的
<head>部分添加Google Fonts的链接
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
这个链接会加载Roboto字体,你可以根据需要更改
family参数来选择其他字体。 -
在CSS中使用该字体
body { font-family: 'Roboto', sans-serif; }
使用其他Web字体服务或自定义字体
除了Google Fonts，还有其他一些Web字体服务，如Adobe Fonts等，如果你有自己的字体文件（如.ttf、.otf等），也可以使用@font-face规则来定义字体。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/mycustomfont.ttf') format('truetype');
}
body {
font-family: 'MyCustomFont', sans-serif;
}
</style>
</head>
<body>
<p>这是一段使用自定义字体的文本。</p>
</body>
</html>
在这个例子中,假设你有一个名为mycustomfont.ttf的字体文件放在fonts文件夹下，通过@font face规则定义了字体家族为MyCustomFont，然后在CSS中将其应用于body元素，如果自定义字体无法加载，则会使用无衬线字体（sans serif）作为替代。
FAQs
问题1：如何在HTML中同时应用多种字体样式？
答：可以通过组合使用CSS属性来实现，你可以在一个元素上同时设置字体类型、大小、颜色、粗细和风格等多个属性。
<p style="font-family: 'Arial', sans-serif; font-size: 16px; color: red; font-weight: bold; font-style: italic;">这段文本同时应用了多种字体样式。</p>
```或者在使用内部或外部样式表时，在对应的选择器中定义多个字体相关的属性，如：
```css
.multiStyle {
font-family: 'Times New Roman', serif;
font-size: 18px;
color: #0066CC;
font-weight: 600;
font-style: normal;
}
```然后在HTML元素中使用这个类，如`<p class="multiStyle">...</p>`。
问题2：为什么有些字体在网页上显示不出来？
答：可能有几个原因，一是用户系统中没有安装该字体，如果没有提供替代字体，就可能无法正确显示，二是字体文件路径错误（如果是自定义字体使用@font face规则），导致浏览器无法找到并加载字体文件。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/64966.html
