HTML中，设置字体的方法多种多样,以下是几种常见且有效的方式：
使用CSS设置字体
| 属性 | 说明 | 示例 |
|---|---|---|
| font-family | 指定字体系列，按优先级顺序排列，若前面字体不可用则依次向后查找可用字体 | p { font-family: "Arial", sans-serif; } |
| font-size | 设置字体大小，可使用多种单位，如像素（px）、相对单位（em、rem）、百分比（%）、视口单位（vw、vh）等 | p { font-size: 16px; }p { font-size: 1.2em; }p { font-size: 1.2rem; }p { font-size: 150%; }p { font-size: 5vw; } |
| font-weight | 设置字体粗细，可取值如normal（正常粗细）、bold（粗体）、bolder（更粗）、lighter（更细），也可取100 900的数值 | p { font-weight: bold; }p { font-weight: 700; } |
| font-style | 设置字体风格，如normal（正常）、italic（斜体）、oblique（倾斜） | p { font-style: italic; } |
| font-variant | 设置字体变体，如normal（正常）、small-caps（小型大写字母） | p { font-variant: small-caps; } |
| line-height | 设置行高，可使用像素、em、rem等单位，也可取数值或百分比 | p { line-height: 1.5; }p { line-height: 24px; } |
使用Google Fonts设置字体
Google Fonts是一个免费的Web字体库，提供了丰富的字体选择，通过在HTML中添加链接来引用Google Fonts提供的字体样式表，可以轻松地在网页中使用特定的字体，要在网页中使用Roboto字体，可以在HTML文件的<head>部分添加以下代码：
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
然后在CSS中使用font-family属性指定Roboto字体：
body {
font-family: 'Roboto', sans-serif;
}
使用自定义字体文件设置字体
除了使用系统字体和Web字体库，还可以使用自定义字体文件来设置字体样式，这种方法通常适用于特定的设计需求，允许开发者在网页中使用自己的特殊字体，需要将自定义字体文件（如.ttf、.otf等）上传到服务器或托管到CDN上，在CSS中使用@font-face规则定义字体：
@font-face {
font-family: 'MyCustomFont';
src: url('path/to/mycustomfont.ttf') format('truetype');
}
在HTML元素中使用font-family属性指定自定义字体：
body {
font-family: 'MyCustomFont', sans-serif;
}
使用内联样式设置字体
虽然不推荐在实际开发中大量使用内联样式，但在某些简单场景下，使用内联样式可以快速设置元素的字体，要设置一个段落的字体为Arial，大小为14px，颜色为红色,可以使用以下代码：
<p style="font-family: Arial; font-size: 14px; color: red;">这是一个段落</p>
使用类选择器设置字体
为了更好地管理和维护样式，可以将字体样式定义在CSS类中，然后在HTML元素中应用该类，定义一个名为.special-text的类，设置字体为Courier New，大小为18px,颜色为蓝色：
.special-text {
font-family: 'Courier New', monospace;
font-size: 18px;
color: blue;
}
然后在HTML中应用该类：
<p class="special-text">这是一段特殊样式的文字</p>
使用ID选择器设置字体
如果需要为特定的单个元素设置独特的字体样式，可以使用ID选择器，定义一个ID为uniqueText的元素，设置字体为Georgia，大小为20px,颜色为绿色：
#uniqueText {
font-family: 'Georgia', serif;
font-size: 20px;
color: green;
}
然后在HTML中应用该ID：
<p id="uniqueText">这是一段具有唯一样式的文字</p>
相关FAQs
问题1：如何在HTML中同时设置段落字体和整个页面字体？
答：在HTML中同时设置段落字体和整个页面字体的最佳方法是使用CSS样式表，可以在<style>标签或外部CSS文件中定义全局的字体样式，应用于body元素，以设置整个页面的默认字体，针对特定的段落或其他元素,可以通过类选择器或ID选择器来定义和应用特定的字体样式。
body {
font-family: 'Arial', sans-serif;
font-size: 16px;
}
.paragraph-style {
font-family: 'Times New Roman', serif;
font-size: 14px;
}
<p class="paragraph-style">这是一个段落，使用了与页面默认字体不同的样式。</p>
问题2：为什么在HTML中推荐使用CSS来设置字体而不是使用<font>
答：在HTML中推荐使用CSS来设置字体而不是使用<font>标签的原因主要有以下几点：
- 与样式：CSS遵循“表现与内容分离”的原则，使得HTML代码更加清晰、易读，并且便于维护和更新，而
<font>标签将样式信息直接嵌入到HTML内容中,违反了这一原则。 - 更强的样式控制：CSS提供了丰富的样式属性和选择器，可以更精确地控制元素的样式，包括字体、颜色、大小、间距等，而
<font>标签只能设置有限的字体属性,且功能较为单一。 - 更好的兼容性和可访问性：使用CSS设置的样式在不同浏览器和设备上具有更好的兼容性，CSS样式可以被屏幕阅读器等辅助技术识别，有助于提高网站的可访问性，而
<font>标签在某些情况下可能无法被正确解析或渲染，且不利于搜索引擎优化（SEO
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/59301.html
