如何在 HTML 中编写非常小的文本

Question

我想要一个小于 Arial 9px 文本的字体。

我试图找到其他字体名称，但我没有成功获得一个非常小的文本。 有没有办法使用 css 轻松实现这一点？

编辑：我不能使用 Arial 低于 9px 我已经尝试过字体大小、小、变换、缩放、其他字体......因为我是一位经验丰富的 Web 开发人员。

Answer 1

将 font-size 设置为您想要的任何值 - 尽管您可能会发现任何小于 9px 的字体都可能太小而无法很好地阅读。 您也可以使用 em 或 rem 或百分比来实现。

但是您可以按如下方式设置字体大小（例如，您希望大小为 6px 的 p 元素）。

 p {font-size: 6px}

所以请注意，您没有导入最小的字体 - 您正在调整 html 元素的大小，使其具有 CSS 的小字体大小）。 使用这个原则——你为所有你想使用它的元素设置字体大小——例如：p、span、a、li、h 等。

但同样-出于可访问性目的，我必须对此提出警告。

 p { font-family: Arial; font-size: 6px; }

 <p>This is a test with Arial font at 6px and is NOT recommended</p>

Answer 2

你可以试试

 div p { font-family: 'Arial'; -webkit-text-size-adjust: none; font-size: 5px }

 <div> <p>lorem</p> </div>

Answer 3

如果添加 css 样式不起作用，那么可能与您的浏览器自动调整字体大小有关。

试试这个来停止字体大小的自动调整：

* {
    -webkit-text-size-adjust: none; //For chrome browser
}

Answer 4

您必须考虑的几件事

1. 确保 .css 文件是您在 html 中加载的最后一个文件（例如在Bootstrap之后）。
2. 将!important属性用于您的 css 属性（ font-size: 4px !important; ）
3. 如果这 2 条建议不起作用，请尝试在您的元素中添加inline-css <p style="font-size: 4px">I'm a 4 px paragraph</p>

Answer 5

大多数（全部？）浏览器都有最小字体大小，以避免不正当的人出于某种原因显示不可读的文本。 某些浏览器允许您对此进行调整，但您根本不能指望能够在其他任何机器上显示小于 9pt 的内容。

除非您选择非常古老的学校：将您的文本创建为图形。

或者：创建您自己的自定义小字体 - 只要它具有（例如）12pt 字体的所有功能，它就会显示得很好，但如果字形只有两个点高，那就是您将看到的。

Answer 6

您可以使用 HTML <small>标签。 https://www.w3schools.com/tags/tag_small.asp

Answer 7

您也可以多次重复小标签以使其尽可能小。 有趣的是，我在任何地方都没有看到过这个！

<h2>My Headline <small><small><small>(Subject)</small></small></small></h2>