前端面试：怎么让Chrome支持小于12px的前端文字？

作者：NativeBase 2023-06-05 08:39:21开发 前端 在CSS中，通过*选择器可以选择页面上所有的面试元素。然后，文字通过font-size属性来设置字体大小。前端在上面的面试示例代码中，font-size的文字值设置为10像素。您可以将这个值更改为小于12px的前端任何值。

要让Chrome浏览器支持小于12px的面试文字，可以使用CSS的文字font-size属性来设置字体大小。

以下是前端一个示例CSS代码，将所有字体大小设置为小于12px：

* {     font-size: 10px;  }

解释：在CSS中，面试通过*选择器可以选择页面上所有的文字元素。然后，前端通过font-size属性来设置字体大小。面试在上面的文字示例代码中，font-size的值设置为10像素。您可以将这个值更改为小于12px的任何值。

如果您想在特定的HTML元素中支持小于12px的文本，可以使用相同的CSS选择器，只是在其后面加上元素的选择器，例如：

<p style="font-size: 10px;">这里支持小于12px的文字。</p>

请注意，当您将字体大小设置为小于12px时，可能会导致一些文本显示不清晰或不可读。因此，您可能需要根据具体情况进行调整。

注意：

html, body { -webkit-text-size-adjust: none;}

新版的chrome已经取消了。

CSS3有个新的属性transform，而我们用到的就是transform:scale()

p{ font-size:10px;-webkit-transform:scale(0.8);}

但是，如果，这个属性会把整个p的属性都缩放。如果我有背景呢？我有边框呢？都会被缩小！

所以我们修改结构为。

我是一个小于12PX的字体。

代码如下：

body,p{    margin:0;   padding:0} p{   font-size:10px;}span{   -webkit-transform:scale(0.8);   display:inline-block}

定义 display:inline-block而不是 display:block；会发现。

会存在一定的边距。貌似margin或者padding的间距。

这就是缩放存在问题。原来的位置还占有12px字体的大小。所以，要对应修改margin了。定义为负的。

还有一个方法。

html { font-size: 625%;} body { font-size: 0.16rem;}

责任编辑：姜华 来源： 今日头条 CSS前端

(责任编辑：探索)