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

【问题标题】：How to write very small text in HTML如何在 HTML 中编写非常小的文本
【发布时间】：2019-05-27 20:37:36
【问题描述】：

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

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

编辑： 我不能使用 Arial 低于 9px 我已经尝试过 font-size、small、transform、scale、其他字体...一切，因为我是一位经验丰富的 Web 开发人员。

【问题讨论】：

什么意思，不能低于9px？你可以有任何你想要的字体大小，只要它是正数或零。一定有一些副作用。如果没有显示您的问题的示例代码，没有人可以帮助您。
如果我进入控制台并更改字体大小，它不起作用。我正在尝试重现它，但确实在 WC 页面上我可以将 5px 放在它的工作原理上。
如何更改字体大小？
就像@gavgrif 在他的示例中显示的那样 li { font-size : 8px } 然后我尝试了重要的...

标签： html css fonts

【解决方案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;
}

&lt;p&gt;This is a test with Arial font at 6px and is NOT recommended&lt;/p&gt;

【讨论】：

我的第一次尝试，使用 Arial 无法低于 9px，已编辑后
太疯狂了，sn-p 有效，W3C 示例有效，我快疯了

【解决方案2】：

你可以试试

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

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

【讨论】：

【解决方案3】：

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

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

或者：创建您自己的自定义小字体 - 只要它具有（例如）12pt 字体的所有功能，就可以正常显示，但如果字形只有两个点高，您就会看到.

【讨论】：

我认为这是由于我的浏览器设置，我希望我可以分享我的 html 页面，但它是我正在开发的视频游戏内容的一部分，所以保密^^
谢谢我忘了看这个，正因为如此，我的默认 chrome 字体大小是 9px。将其更改为 6px 并且我能够正确查看我的页面。我不明白为什么我能够在 W3C 网站（客户端）上更改它，但不能在我这边（我必须更改我的浏览器 fotn 设置）???

【解决方案4】：

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

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

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

【讨论】：

确实是浏览器字体调整所致
根据stackoverflow.com/questions/1306269/… ，现在已得到广泛支持。可以为 Firefox 确认。

【解决方案5】：

您必须考虑的几件事

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>

【讨论】：

谢谢，但这是由于浏览器字体最小，我知道所有 css/html 的东西，所以这就是为什么我的问题看起来像我一样愚蠢：p

【解决方案6】：

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

【讨论】：