在HTML中实现着重号，主要有两种方法：使用CSS text-emphasis属性自动生成着重号，或直接输入Unicode着重号字符，前者适用于现代浏览器且易于维护，后者适合无法使用CSS的纯文本环境。
着重号在HTML中的两种主流实现方式
用CSS text-emphasis属性生成着重号
CSS3 的 text-emphasis 属性专门用于给文字添加着重号，支持点、圆、三角形等样式，用法如下：
.emphasis {
text-emphasis: dot;
-webkit-text-emphasis: dot; / 兼容旧版WebKit /
}
将class=”emphasis”加到任意文本元素上，浏览器会自动在每个字符下方（或上方）绘制着重号。
- 缺点：IE浏览器不支持，但Chrome、Firefox、Safari均支持，据Can I Use数据，text-emphasis在主流浏览器中覆盖率已超过90%。
- 优点：无需手动插入字符，语义清晰,可统一修改样式。
- 扩展：text-emphasis还可以指定符号颜色和位置，比如
text-emphasis: circle red;。
直接输入着重号字符（Unicode）
如果你需要纯文本中的着重号，或者要兼容老旧浏览器，可以手动插入Unicode符号，常见选项：
– 中点·（U+00B7）：在中文排版中常被用来模拟着重号，但视觉上偏小。
– 黑色圆点●（U+25CF）：大小适中，多数系统字体支持。
– 三角标记⁌（U+204C）：较少用，但也是官方“着重号”参考字符。
– 专用符号“着重点”（U+1F789？）实际Unicode并未定义专门用于着重号的字符，上述都是替代方案。
输入方式：在HTML中直接粘贴字符或使用字符实体，如“·”用·，“●”用●。
对比：哪种方法更适合你的网页？
| 对比维度 | CSS text-emphasis | 直接输入字符 |
|———|——————-|————-|
| 兼容性 | 现代浏览器，IE不支持 | 所有浏览器 |
| 维护成本 | 一次定义，全局生效 | 每个要标记的位置手动插入 |
| 语义化 | 通过CSS表示强调，符合Web标准 | 字符本身无语义 |
| 视觉效果 | 精确对齐，符号大小可调 | 依赖字体，符号可能不居中 |
| 适合场景 | 前端开发、需要标准化强调的网页 | 纯文本、Markdown、邮件正文 |
小结：绝大多数场景下，推荐使用CSS text-emphasis属性，如果必须兼容IE或无法使用CSS,再考虑字符方案。
实际应用场景：如何选择着重号实现方案
中文文章强调关键词
在博客、新闻网站中，需要给某些关键词加着重号以突出，用CSS text-emphasis可以只给特定class的span添加样式，不影响搜索引擎抓取文本内容。
p.keyword span {
text-emphasis: dot;
-webkit-text-emphasis: dot;
}
注意：text-emphasis默认将着重号放在文字上方，对中文竖排文字可调整位置，行业共识认为，在横排中文中，着重号通常放在文字下方，可借助“text-emphasis-position: under;“实现。
移动端排版与性能考量
移动端浏览器对text-emphasis支持良好，而且使用CSS生成的着重号不占用额外DOM节点，不会增加页面大小，而手动插入字符会增加HTML体积，且在小屏设备上容易导致字符错位，移动端优先选择CSS方案。
与旧版浏览器兼容
如果你的网站需要兼容IE11及以下，text-emphasis不生效，此时可以：
– 使用JavaScript polyfill，但会增加加载负担。
– 直接使用字符方案，例如用“●”加在文字后面，但需要手动控制间距和样式。
实操步骤：在IE中，可以用::after伪元素插入圆点字符，配合position定位，模拟着重号效果，但这种方法较为复杂，推荐在IE中放弃着重号装饰，或使用“·”作为替代。
着重号在HTML输入中的常见问题与避坑指南
着重号字符显示为方框？
如果直接输入字符后用户看到方框，说明该字符在当前字体中缺失，解决方案：
– 使用常见字符，如“·”和“●”几乎在所有字体中都有。
– 在CSS中指定fallback字体，`font-family: ‘Segoe UI’, ‘Microsoft YaHei’, sans-serif;“。
– 对于text-emphasis生成的符号，它由浏览器绘制，不依赖字体，不会出现方框问题。
text-emphasis属性不生效？
– 检查是否添加了-webkit-前缀，某些旧版Chrome和Safari需要前缀。
– 确认是否设置了显式字体大小，text-emphasis符号的大小与字号相关，如果字号极小，符号可能不可见。
– 在部分浏览器中，text-emphasis会被inline-block元素截断，确保目标元素是inline或inline-block但未脱离文档流。
着重号长度与间距怎么控制？
如果是字符方案，着重号通常会占用一个字符宽度，导致文字间距变大，可以用负margin或letter-spacing微调，CSS方案则没有此问题，符号附着在文字上，不改变原间距。
Q&A：html着重号怎么打？常见疑问解答
html着重号怎么打最简单？
最简单的方法是用CSS text-emphasis属性，给目标元素加一行样式即可，不需要任何字符输入，也不影响原文本，如果一定要在纯文本中打着重号，直接复制粘贴“●”或“·”最省事，但注意兼容性。
着重号在html中怎么输入才能兼容所有浏览器？
要兼容所有浏览器（包括IE），推荐使用“·”字符（·），它几乎在所有浏览器和字体中正常显示，但视觉上较弱，如果需要更醒目的点，可用“●”（●），但老旧浏览器可能显示为空心圆，测试表明，这两个字符在IE6以上均正常渲染，对于CSS方案，可使用polyfill或对IE写回退样式，但“兼容所有浏览器”要求下，字符方案是唯一保险的选择。
有没有不用css就能打出着重号的方法？
有，直接输入Unicode字符即可，例如在HTML中书写“注意·这里”或“注意●这里”，没有CSS依赖，纯粹靠字符，但这种方法无法控制着重号的位置和大小，也无法一键撤销，如果追求便捷且不依赖CSS，用字符实体是所有方法中最直接的方式。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/536060.html
