欢迎光临江苏一网通科技有限公司,公司主要服务网站SEO优化,企业高端网站开发定制!

咨询电话:17361814777 | XML地图

WEB THINK NEW

全球最新、最热的APP 和小程序新闻资讯

网站建设方法 网站推广方法

扬州网络公司是怎么用css解决常用浏览器字体大小12px的问题

发表时间:2020-04-08 09:32:54

  网站建设中有非常多的小方法可以让建站更轻松,谷歌浏览器Chrome是Webkit的内核,之前,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即可实现字体大小不随终端设备或浏览器影响。

扬州网络公司是怎么用css解决常用浏览器字体大小12px的问题

  CSS代码定义如下:
  -webkit-text-size-adjust:none;
  但是,在现在最新版的谷歌里,已经不在支持这个属性啦。
  所以css又出了新的属性:transform:scale()
  <body><p>我是一个小于12PX的字体</p></body>
  定义一个样式
  body,p{ margin:0; padding:0}
  p{font-size:10px;}
  放在浏览器预览,会发现最新版谷歌已经不在支持,还是12像素
  所以我们就要用到了,下面属性
  -webkit-transform:scale(0.8);   //0.8位缩放倍数,具体自己根据实际需求修改
  修改后样式为
  body,p{ margin:0; padding:0}
  p{font-size:10px;-webkit-transform:scale(0.8);}
  但是,这个属性会把整个p的属性都缩放。
  如果有背景、边框、都会被缩小!
  所以我们需要修改结构为
  <p><span>我是一个小于12PX的字体</span></p>
  定义样式为
  body,p{ margin:0; padding:0}
  p{font-size:10px;}
  span{-webkit-transform:scale(0.8);}
  改了之后,还是不可以的。
  原因 -webkit-transform:scale(0.8); 只能缩放可以定义宽高的元素,而span是行内元素,不可以
  所以我们修改为
  body,p{ margin:0; padding:0}
  p{font-size:10px;}
  span{-webkit-transform:scale(0.8); display:inline-block}
  为什么定义 display:inline-block 而不是 display:block?
  转为block就独占一行啦!如果我后面还有其他元素就会受到影响,所以需要转换为 inline-block
  现在放到谷歌浏览器里,就会发现支持字体变小啦
  但是还会存在一定的边距,貌似margin或者padding的间距,这就是缩放存在问题,原来的位置还占有12px字体的大小。
  所以,还要对应修改margin了,定义为负的即可。