导读：
在 HTML 中设置字体样式有多种方法，常用的包括通过 CSS 的 font-family、font-size、font-weight 等属性来实现。以下是具体的实现方...
在 HTML 中设置字体样式有多种方法，常用的包括通过 CSS 的 font-family、font-size、font-weight 等属性来实现。以下是具体的实现方式：
使用 style 属性直接在 HTML 标签中定义字体样式：
<p style="font-family: Arial, sans-serif; font-size: 16px; color: #333; font-weight: bold;">
这是一段设置了字体样式的文本
</p>
在 HTML 文档的 <head> 部分使用 <style> 标签定义样式，可复用：
<head>
<style>
.custom-text {
font-family: "Microsoft YaHei", "SimHei", sans-serif; /* 优先使用前者，没有则 fallback */
font-size: 18px; /* 字体大小 */
font-style: italic; /* 斜体 */
font-weight: 600; /* 字体粗细（400正常，700加粗） */
line-height: 1.5; /* 行高 */
color: #666; /* 字体颜色 */
}
</style>
</head>
<body>
<p class="custom-text">这段文本应用了内部样式表的字体设置</p>
</body>
创建独立的 .css 文件（如 styles.css），然后在 HTML 中引入：
styles.css
body {
font-family: Georgia, serif; /* 全局字体设置 */
font-size: 16px;
}
.title {
font-family: "Times New Roman", serif;
font-size: 24px;
font-weight: bold;
}
HTML 文件
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="title">标题文本</h1>
<p>正文文本会继承 body 的字体样式</p>
</body>
如果需要使用特殊字体，可以通过 @font-face 引入 Web 字体：
/* 在样式表中定义 */
@font-face {
font-family: "MyCustomFont";
src: url("font.woff2") format("woff2"), /* 字体文件路径 */
url("font.woff") format("woff");
font-weight: normal;
font-style: normal;
}
/* 使用自定义字体 */
.text {
font-family: "MyCustomFont", sans-serif;
}
font-family：设置字体（多个字体用逗号分隔，作为 fallback）font-size：字体大小（px、em、rem 等单位）font-weight：字体粗细（normal/bold 或 100-900 的数值）font-style：字体样式（normal/italic/oblique）color：字体颜色（颜色名、十六进制、RGB 等）line-height：行高（影响文本行间距）
建议优先使用系统自带字体或通用字体族（如 sans-serif、serif），以保证兼容性和加载速度。
发表评论: