HTML常用文本标签怎么调整字体？样式属性搭配介绍-html教程-PHP中文网

标签在HTML5中已被废弃，必须用CSS的color、font-size、font-family等属性替代；它不支持响应式、暗色模式、无障碍及现代样式能力，且会导致CI/CD或Lighthouse检查失败。

html常用文本标签怎么调整字体？样式属性搭配介绍

直接用 CSS 的 color、font-size、font-family 三个属性就能控制字体颜色、大小和字体，别碰  标签——它在 HTML5 中已废弃，浏览器可能渲染但会报错，CI/CD 或 Lighthouse 检查直接不通过。

内联 style 改单个元素字体最简单，但有优先级陷阱

适合临时调试或静态页快速验证，写法是：警告文本

color 支持颜色名（red）、十六进制（#333）、rgb(51, 51, 51)、hsl(0, 0%, 20%)；别加引号，color: "red" 会失效
font-size 推荐用 rem（相对于根字号）或 em（相对于父字号），比 px 更适配响应式；但设计稿标注明确时，16px 也完全可用
常见翻车：写成 font-size: 1.2 rem（中间多空格），整条声明被浏览器忽略，在开发者工具里显示为划掉的灰色
内联样式优先级最高，一旦写了 style="color: red"，后面用类名想覆盖就得加 !important——这会让后续维护变困难，尤其多人协作时

用 class + 内部 style 统一控制页面内字体样式

把规则写在的 <style></style> 块里，例如：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

<style>
body { color: #222; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
h2 { font-size: 1.5rem; color: #1a5fb4; }
.text-error { color: #d32f2f; font-weight: 600; }
</style>

类选择器（如 .text-error）优先级高于标签选择器（如 p），但低于内联 style
如果项目用了 Bootstrap 或 Tailwind，它们的 body 或 p 可能已有默认 color，你的规则得写得更具体（比如 body p 或加新类名）才能生效
别滥用 !important：它会破坏层叠逻辑，导致后续改色时找不到生效源头

CSS 变量适合主题切换，但 currentColor 不是“自动暗色模式”

想换主色调时全局联动，用 :root 定义变量：

<style>
:root { --text-primary: #3498db; }
p { color: var(--text-primary); }
.icon { fill: currentColor; }
</style>

currentColor 是当前元素 color 属性的值，不是动态感知系统主题的变量
它常用于 SVG 图标填充或边框颜色同步文字色，比如 border: 1px solid currentColor
要支持暗色模式，得手动配合 @media (prefers-color-scheme: dark) 重设 --text-primary，currentColor 自己不会变
老版本 Safari 在伪元素（如 ::before）中读取 currentColor 可能异常，需实测