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

开发 前端
在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;}
责任编辑:姜华 来源: 今日头条
相关推荐

2020-11-12 10:20:40

前端面试web

2023-06-13 07:54:17

DOM 封装作用域

2023-06-26 08:24:23

JavaScriptAJAX

2017-08-16 10:03:57

前端面试题算法

2012-05-08 16:11:14

WEB前端开发面试

2023-06-02 08:49:25

优雅降级CSS3

2023-12-12 07:40:52

JavaScript面试题前端

2022-02-09 07:40:42

JavaScript前端面试题

2022-07-27 08:27:34

Call前端

2023-06-29 07:48:35

异步加载JavaScript

2019-01-21 15:00:51

面试前端开发

2021-02-02 06:12:39

JavaScript 前端面试题

2023-05-19 08:21:40

MarginCSS

2020-06-29 15:20:31

前端React Hooks面试题

2018-05-10 16:52:03

阿里巴巴前端面试题

2016-02-23 11:22:20

前端面试小记

2019-02-21 14:12:26

前端面试题Vue

2023-08-27 15:57:28

前端开发

2023-05-29 10:38:00

HTML5离线存储

2011-12-08 09:58:00

点赞
收藏

51CTO技术栈公众号