当前位置：首页 > 行业动态 > 正文

html字体样式

HTML字体样式通过CSS控制，常用属性包括font-family（字体类型）、 font-size（字号）、font-weight（粗细）、color（颜色）及text-decoration（修饰），可结合class/id定义样式类，或直接内联样式，推荐使用语义化标签（如strong/em）

HTML字体样式详解

字体类型与字体族（Font Family）

通过 font-family 属性设置字体类型，可指定多个备选字体，最后以通用字体结尾。

属性 示例 说明
font-family body { font-family: Arial, sans-serif; } 优先使用 Arial，若不存在则用无衬线字体
通用字体族 serif（衬线）/sans-serif（无衬线）/monospace（等宽）/cursive（手写）/fantasy（艺术） 系统默认字体系列

示例： 

<p style="font-family: 'Microsoft YaHei', sans-serif;">微软雅黑字体</p>

字体大小（Font Size）

使用 font-size 或直接通过 HTML 标签（不推荐）设置。

单位 示例 说明
px（像素） font-size: 16px; 固定大小，常用单位
em（相对） font-size: 1.5em; 相对于父元素字体大小
rem（根相对） font-size: 1.2rem; 相对于根元素（<html>）字体大小
HTML标签 <h1>~<h6>, <small> 已废弃，建议用CSS替代

示例：

html字体样式 第1张

<p style="font-size: 18px;">18像素字体</p>
<p style="font-size: 1.2em;">父元素的1.2倍大小</p>

字体颜色（Color）

通过 color 属性设置，支持多种颜色表示法。

属性 示例 说明
color color: #336699; 十六进制颜色
color: rgb(51,102,153); RGB值
color: hsl(210, 40%, 50%); HSL值
color: rgba(51,102,153, 0.5); RGBA（带透明度）

示例： 

<span style="color: #ff0000;">红色文字</span>
<span style="color: rgb(0,128,0);">绿色文字</span>

字体粗细与斜体（Weight & Style）

通过 font-weight 和 font-style 控制。

属性 示例 说明
font-weight font-weight: bold; 数值（100-900）或关键字（normal/bold）
font-style font-style: italic; 斜体（italic）或正常（normal）

对比标签与CSS：
| 标签 | CSS属性 | 效果 |
|—————|————————|———————-|
| <b> | font-weight: bold; | 视觉加粗 |
| <strong> | font-weight: bold; | 语义加粗（推荐） |
| <i> | font-style: italic; | 斜体 |
| <em> | font-style: italic; | 强调斜体（推荐） |

文本装饰（Text Decoration）

通过 text-decoration 控制下划线、删除线等。

属性 示例 说明
text-decoration text-decoration: underline; 下划线
text-decoration: line-through; 删除线
text-decoration: none; 移除链接下划线（如 a

示例： 

<a style="text-decoration: none;">无下划线链接</a>
<del>删除线文字</del>

其他样式（行高、字母间距）

属性 示例 说明
line-height line-height: 1.5; 行高（倍数或像素）
letter-spacing letter-spacing: 2px; 字符间距

字体样式优先级

优先级层级 说明
内联样式（style） 最高优先级
内部样式表（<style>） 中等优先级
外部样式表（.css） 最低优先级
!important 强制覆盖所有非!important样式

相关问题与解答

问题1：如何选择合适的字体大小单位？
解答：

  • px：用于固定尺寸设计（如移动端适配）。
  • em：适用于嵌套元素，但易受层级影响。
  • rem：推荐用于响应式设计，统一基于根元素（<html>）大小。
    示例：html { font-size: 16px; } p { font-size: 1rem; } 表示段落为16px。

问题2：为什么中文页面需指定中文字体？
解答：

  • 系统默认字体可能缺失中文支持（如英文系统）。
  • 推荐写法：font-family: "Microsoft YaHei", "SimHei", sans-serif;
  • 若需全局生效,可在 <head> 中引入网络字体（如 Google Noto San
fontfontfamily
0

相关文章