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

发表于:2023-6-14 09:30

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:NativeBase    来源:今日头条

  要让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;}
  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号