当前位置：首页 > 前端开发 > 正文

如何在html中改变字体样式

在 HTML 中可通过内联样式（ style 属性）或 ` 标签设置 font-family 、color 、font-size

核心实现方式

内联样式（Inline Style）

直接通过元素的 style 属性定义样式，适用于临时修改特定元素。
语法示例： 

<p style="font-family: 'Arial', sans-serif; font-size: 16px; color: #333;">这段文字使用内联样式</p>

️ 注意：此方法优先级最高，但会导致代码冗余且难以维护,建议仅用于快速测试或特殊需求。

内部样式表（Internal CSS）

将样式集中写在 <head> 区域的 <style> 标签内，适合单页文档的全局控制。
语法示例： 

<head>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif; / 优先使用微软雅黑 /
    }
    h1 {
      font-weight: bold; / 加粗 /
      font-style: italic; / 斜体 /
      color: darkblue; / 深蓝色 /
    }
  </style>
</head>

优势：比内联样式更整洁,可通过类名复用规则。

如何在html中改变字体样式 第1张

外部样式表（External CSS）

将样式存储在独立的 .css 文件中，通过 <link> 引入，适合大型项目。
操作步骤：

  1. 创建 styles.css 文件；
  2. 在HTML中添加 <link rel="stylesheet" href="styles.css">；
  3. 在CSS文件中编写规则： 
    / styles.css /
p {
  font-size: 14px;
  line-height: 1.5; / 行高优化阅读体验 /
}
.highlight {
  font-variant: small-caps; / 小型大写字母 /
  text-transform: uppercase; / 强制全大写 /
}

    推荐理由：完全分离结构与表现层,便于团队协作和维护。

关键字体属性详解

属性 取值示例 作用说明
font-family “SimSun”, “Times New Roman”, serif 指定字体系列，按顺序回退
font-size 12px / 1em / 1rem / 1vw 控制字号大小
font-weight normal / bold / 400 / 700 设置粗细程度
font-style normal / italic / oblique 定义斜体效果
color #FF0000 / red / rgba(255,0,0,0.5) 文字颜色（支持HEX、RGB、HSL等格式）
text-align left / center / right 文本水平对齐方式
text-decoration underline / line-through / none 添加下划线/删除线/无装饰
letter-spacing 2px 字符间距调整
word-spacing 5em 单词间距调整
text-shadow 2px 2px 4px #ccc 文字阴影效果
font-variant small-caps 小型大写字母
text-transform uppercase / lowercase / capitalize 强制转换字母大小写

特殊说明：

  • 字体栈（Font Stack）：由于用户设备未必安装指定字体，需按优先级列出多个备选方案。
    例：font-family: "Helvetica Neue", Arial, sans-serif;
  • Web安全字体：推荐使用以下组合确保跨平台一致性：
    • Serif: Georgia, Times New Roman
    • Sans-serif: Arial, Helvetica, Verdana
    • Monospace: Courier New, Monaco
  • 相对单位：em（相对于父元素字体大小）、rem（相对于根元素）、vw/vh（视窗单位）可实现响应式布局。

典型场景解决方案

场景1：标题分级设计

h1 {
  font-size: 2.5rem; / 主标题最大 /
  font-weight: 900; / 超粗体 /
  letter-spacing: -1px; / 紧凑排版 /
}
h2 {
  font-size: 1.8rem;
  border-bottom: 2px solid #eee; / 底部边框分隔 /
  padding-bottom: 0.3em;
}

场景2：引用块特殊样式

blockquote {
  font-style: italic;
  color: #666;
  border-left: 5px solid #ddd; / 左侧装饰线 /
  padding-left: 1em;
  margin: 1em 0;
}

场景3：移动端适配优化

@media (max-width: 768px) {
  body {
    font-size: 16px; / 移动端基础字号放大 /
  }
  .article-content {
    line-height: 1.6; / 增大行距提升可读性 /
  }
}

常见误区与避坑指南

  1. 过度依赖系统默认字体
    错误做法：仅写 font-family: Arial; 而不考虑中文环境。
    ️ 正确做法：为中文内容指定本地化字体，如 "PingFang SC", "Microsoft YaHei", sans-serif。

  2. 忽略字体加载性能
    避免直接使用罕见字体名称，若需自定义字体应结合 @font-face 预加载： 

    @font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2');
}

  3. 混淆行高与字体大小
    line-height 应设为相对值（如 5），而非固定像素,以保证缩放时的适应性。

完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">字体样式演示</title>
  <style>
    / 基础重置 /
    body {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 14px;
      line-height: 1.6;
      color: #333;
    }
    / 标题样式 /
    h1 {
      font-size: 2rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 1em;
    }
    / 强调文本 /
    .emphasis {
      font-weight: bold;
      color: #e74c3c;
      text-decoration: underline wavy #f39c12; / 波浪形下划线 /
    }
    / 代码片段 /
    pre {
      font-family: "Courier New", monospace;
      background-color: #f8f9fa;
      padding: 1em;
      border-radius: 4px;
      overflow-x: auto; / 长文本横向滚动 /
    }
  </style>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是一个普通段落，使用了<span class="emphasis">强调样式</span>突出关键词。</p>
  <pre>// 这是一段代码示例
console.log("Hello World");</pre>
</body>
</html>

FAQs

Q1: 为什么设置了英文字体却显示成了宋体？

A: 因为未正确声明字体栈，中文环境下，若未包含中文字体，浏览器会降级到系统默认的宋体，解决方案是在 font-family 中加入中文字体，font-family: "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;。

Q2: 如何让所有段落的第一行缩进2个字符？

A: 使用 text-indent 属性： 

p {
  text-indent: 2em; / 1em≈1个字符宽度 /
}

注意：该属性仅对块级元素有效，且不会作用于列表项

字体样式
0

相关文章