tt标签已过时，建议用CSS或pre替代

要设置等宽字体文本，核心在于CSS的font-family属性。最直接有效的方式是指定monospace关键字：

p {
    font-family: monospace; /* 浏览器会使用其默认的等宽字体 */
}

但这往往不够，因为不同浏览器、不同操作系统下的默认等宽字体可能千差万别，效果不一定是你想要的。所以，更专业的做法是提供一个字体栈（font stack），优先选择一些知名的、高质量的等宽字体，最后再回退到monospace：

pre, code, kbd, samp {
    font-family: 'Fira Code', 'JetBrains Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    /* 
       这个顺序很重要：
       - 'Fira Code', 'JetBrains Mono': 开发者社区非常流行的优秀等宽字体，支持连字（ligatures）。
       - Consolas: Windows下非常出色的等宽字体。
       - 'Liberation Mono': Linux下常见的替代选择。
       - Menlo: macOS下默认的等宽字体。
       - Courier: 历史悠久，兼容性好，但可能视觉效果不佳。
       - monospace: 作为最终回退，确保无论如何都有等宽字体。
    */
    font-size: 0.9em; /* 适当调整字号，让代码看起来更舒服 */
    line-height: 1.6; /* 增加行高，提升代码可读性 */
    tab-size: 4; /* 设置tab宽度，现代浏览器支持 */
    -moz-tab-size: 4; /* Firefox的旧写法 */
    -o-tab-size: 4; /* Opera的旧写法 */
}

通过这种方式，我们可以确保在多数情况下，用户能看到我们精心挑选的字体，同时也有足够的兼容性兜底。

为什么在网页设计中，等宽字体如此重要？

等宽字体在网页设计中，尤其是在技术内容展示上，简直是不可或缺的存在。它的重要性远不止于“看起来像代码”那么简单，而是直接关乎信息传递的效率和用户体验的质量。

首先，可读性是核心。等宽字体最大的特点就是每个字符占据的宽度是固定的。这对于代码、终端输出、数据表格这类内容至关重要。想象一下，如果代码中的变量名、函数名，或者对齐的括号、缩进，因为字体宽度不一而错位，那简直是灾难。等宽字体能够保证字符的垂直对齐，让代码结构清晰，方便开发者快速扫描、理解逻辑，甚至更容易发现潜在的语法错误。我个人在阅读技术文档时，如果代码块的字体选择不当，哪怕内容再好，也会让我感到眼睛疲劳，甚至直接放弃阅读。

其次，它传递了一种明确的语义信号。当用户看到一段等宽字体文本时，他们的大脑会立刻将其识别为“这是代码”、“这是命令”、“这是某种技术性的、需要精确解读的内容”。这种视觉提示帮助用户快速切换阅读模式，从普通叙述性文本的散读，转变为对技术细节的精读。这是一种无声的交流，提升了用户界面的直观性。

再者，跨平台的一致性。虽然我们总说“像素完美”很难实现，但在等宽字体的世界里，至少在字符布局上，我们能达到高度的一致性。这确保了无论用户在Windows、macOS还是Linux上浏览你的网站，代码示例的视觉呈现都能保持统一，减少因字体差异带来的视觉混乱。对于那些需要展示大量代码或技术数据的网站，这种一致性是专业性的体现。

最后，等宽字体有时也能用于非代码的创意表达，比如模拟旧式终端界面、ASCII艺术，或者某些强调精确对齐的排版风格。它不仅仅是功能性的，也可以是美学和品牌风格的一部分。

使用自定义等宽字体时，会遇到哪些性能挑战？

当你想为你的网站引入那些酷炫的自定义等宽字体，比如Fira Code或JetBrains Mono时，性能问题就成了你不得不面对的现实。这就像给你的网站换上了更漂亮的“衣服”，但代价可能是加载时间变长。

主要的挑战在于字体文件加载。自定义字体通常需要通过@font-face规则从服务器下载。字体文件，尤其是包含多种字重（weight）和样式（italic）的字体家族，体积可能相当庞大。这意味着用户在首次访问你的页面时，浏览器需要额外的时间去下载这些字体文件。如果网络环境不佳，或者字体文件过大，就可能导致：

• FOIT (Flash of Invisible Text)：字体文件还没下载好，文本内容就直接不显示了。用户会看到一块空白，直到字体加载完成才突然出现。这体验非常糟糕，让人觉得网站加载缓慢甚至卡顿。
• FOUT (Flash of Unstyled Text)：在字体文件下载完成之前，浏览器会先用系统默认的字体来渲染文本。一旦自定义字体加载完毕，文本会突然“闪变”成新的字体样式。虽然比FOIT好一点，但这种视觉上的跳动依然会影响用户体验。

为了缓解这些问题，我们通常会采取一些策略。比如，使用font-display CSS属性来控制字体加载时的行为。swap模式允许立即显示系统字体，并在自定义字体加载完成后进行替换，避免了FOIT。optional模式则更加激进，如果字体加载太慢，它可能直接放弃加载自定义字体，始终使用系统字体，确保内容快速可见。

另一个考量是字体子集化（subsetting）。很多字体文件包含了地球上几乎所有语言的字符，但你的网站可能只需要英文字符、数字和一些标点符号。通过工具对字体进行子集化处理，只保留你需要的字符，可以显著减小字体文件的大小。

此外，字体格式的选择也很关键。WOFF2是目前压缩率最高、支持最好的Web字体格式，优先使用它能有效减少文件大小。同时，别忘了利用local()关键字在@font-face规则中检查用户本地是否已经安装了该字体。如果本地有，浏览器就不用再下载了，这能大大提升加载速度。

@font-face {
    font-family: 'Fira Code';
    src: local('Fira Code'), /* 优先检查本地是否安装 */
         url('/fonts/FiraCode-Regular.woff2') format('woff2'), /* WOFF2优先 */
         url('/fonts/FiraCode-Regular.woff') format('woff'); /* WOFF作为备用 */
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* 确保内容尽快可见 */
}

总之，引入自定义等宽字体是提升用户体验的好方法，但一定要权衡其带来的性能开销，并采取相应的优化措施。

如何选择并实现代码示例的最佳等宽字体方案？

选择并实现代码示例的最佳等宽字体方案，这不仅是技术活，更带有一丝艺术审美的成分。我个人觉得，一个好的代码字体，首先要让你看得舒服，其次要能准确区分各种字符，最后才是那些锦上添花的特性。

1. 字体选择的核心原则：清晰可辨与易读性

• 字符区分度高：这是最重要的。优秀的等宽字体会确保 l（小写L）、1（数字1）、I（大写i）之间，以及 0（数字0）、O（大写O）之间有明显的视觉差异。如果这些字符混淆不清，调试代码时会让你抓狂。
• 字形平衡：字体本身的字重、宽度和高度要适中，不要过瘦或过胖，也不要显得过于拥挤。
• 支持连字（Ligatures）：这是现代编程字体的一大特色。比如->会变成一个箭头符号，===会变成一个三横线等。我个人对代码连字是又爱又恨，它们确实能让代码看起来更“优雅”和紧凑，但有时也可能让新手感到困惑，或者在某些特定场景下（比如复制代码到不支持连字的编辑器）出现问题。我的建议是，如果你追求极致美观，可以启用；如果更注重普适性和纯粹的字符呈现，则可以禁用。

我常用的推荐字体栈：

font-family: 'Fira Code', 'JetBrains Mono', Consolas, 'Liberation Mono', 'Source Code Pro', Menlo, Courier, monospace;

这个栈涵盖了不同操作系统下常见的优质等宽字体，并加入了几个社区非常推崇的开源字体。

2. 实现时的最佳实践

• 语义化HTML结构：再次强调，使用、

  、等标签来包裹你的代码或技术文本。pre标签通常用于多行代码块，它会保留空格和换行。

• CSS精细控制：
  • 行高（line-height）：对于代码，适当增加行高非常重要。1.5到1.6是一个不错的起点，可以避免代码行挤在一起，提升阅读体验。
  • 字号（font-size）：相对于正文，代码字号可以略小一点，比如0.9em或0.875em，这样在视觉上能形成区分，但又不会太小而难以辨认。
  • tab-size：虽然现在编辑器大多能将Tab转为空格，但在Web上显示时，tab-size属性可以控制Tab字符的显示宽度，确保代码缩进一致。
  • 连字控制：如果你想启用或禁用连字，可以使用font-feature-settings或font-variant-ligatures。

    /* 启用连字 (默认通常是开启的，除非字体本身不支持) */
    font-feature-settings: "liga" on, "clig" on;
    /* 禁用连字 */
    font-feature-settings: "liga" off, "clig" off;
    /* 或者更现代的写法 */
    font-variant-ligatures: none;

• 加载策略优化：如前所述，使用@font-face时，务必考虑font-display: swap;或optional;，并利用local()和WOFF2来优化字体加载性能。
• 测试与迭代：在不同浏览器（Chrome, Firefox, Safari, Edge）、不同操作系统（Windows, macOS, Linux）上测试你的字体方案。因为字体渲染引擎的差异，同一款字体在不同环境下的显示效果可能会有细微差别。

最终，选择一个好的等宽字体方案，就像是为你的代码内容找到了一双舒适的“鞋子”。它不一定是那种花哨的、一眼惊艳的，但一定是能让你长久阅读而不感疲惫的。

今天关于《tt标签已过时，建议用CSS或pre替代》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！