您好!欢迎来到酷虎云

酷虎云

热门搜索: 广告联盟源码    app源码    无人停车系统    车牌识别   

Chrome的最小字体12px限制最终解决办法教程详解

  • 前端技术
  • 编辑:云技术
  • 时间:2022-04-20 15:06
  • 阅读:399

今天带来Chrome的最小字体12px限制最终解决办法教程详解

相信不少做网站的用户会有这样一个问题,Chrome 默认最小字体是12px(最新版英文也有此问题),这个是 Chrome 为了更好显示中文设计的,但是这样一来就会出现某些上标、下标字体过大,影响用户体验。之前在开发Hybid App的时候也被它困扰了很久,在百度上查了很久,网上所有的解决方案都惊奇地相似,只有下面两种:


1-针对谷歌浏览器加前缀进行适配


html{  

  -webkit-text-size-adjust:none;  

  }  

给html标签加上下面一个属性,然而,当我打开浏览器时,发现并没什么用,后来发现这个属性在chrome 27版本以后被废弃了,可真烦呢!


2-利用css3的transform属性


<div class="" small-font="">这是一段文字</div>  


.mini-font{  

  font-size: 12px;  

  -webkit-transform-origin-x: 0;  

  -webkit-transform: scale(0.90);  

}  

这种方法是利用了css3的缩放属性,即:将文字大小整体缩小为原来的0.9倍,但是有一个硬伤,他只是缩小了文字的大小,并不能将文字所占的区域大小缩小,即无法缩小元素的width和height,这就很难受了


3-最终解决办法!!!!从浏览器设置入手


尝试了前2种方法,我发现并没有用,无奈我使用了手机模拟器器进行调试,发现可以将字体设置为10px或者更小,于是乎我就在思考是不是谷歌浏览器本身限制了最小字体大小???于是乎,我打开浏览器,开始慢慢摸索,终于找到根治的办法了


1.打开浏览器,找到“设置”


15250081309837.png


2.搜搜“字体”


36751525006127.png


3.点击“自定义字体”


78851525006127.png


4.将“最小字号”改成10px或者更小(建议不要小于8px,不利于阅读)

e.png



5.然后,问题就解决啦,其实根本就是谷歌浏览器本身对字体做了最小值限制,因为后来我用ie和火狐浏览器调试的时候,字体是可以设置成10px和8px的,这让我更加怀疑是谷歌浏览器的问题,而不是css代码有问题。


到此这篇关于Chrome的最小字体12px限制最终解决办法的文章就介绍到这了,更多相关Chrome最小字体内容请搜索自学php网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持自学php网!




全部评论(0)
资讯详情页最新发布上方横幅
推荐阅读
  • 调用c库 函数可以被Python调用
  • 调用c库 函数可以被Python调用
  • 【酷虎云】本文只讲PythonCAPI,不对Pythonctypes进行介绍由于项目需要,对c语言接口进行了python绑定,采用PythonCAPI方式接口绑定代码中首先需要引入头文件。C函数总是有两个参数,按照惯例分别为self和args。由于定义的是个函数而不是方法,所以self总是为NULL。args参数是一个指向Python的typle对象的指针,包含参数。每个tuple自相对应一个调用参数,这些参数也全都是Pyth
  • 后端技术
  • 编辑:云技术
  • 时间:2022-04-25 14:18
  • 阅读:301
  • Chrome的最小字体12px限制最终解决办法教程详解
  • Chrome的最小字体12px限制最终解决办法教程详解
  • 今天带来Chrome的最小字体12px限制最终解决办法教程详解相信不少做网站的用户会有这样一个问题,Chrome默认最小字体是12px(最新版英文也有此问题),这个是Chrome为了更好显示中文设计的,但是这样一来就会出现某些上标、下标字体过大,影响用户体验。之前在开发HybidApp的时候也被它困扰了很久,在百度上查了很久,网上所有的解决方案都惊奇地相似,只有下面两种:1-针对谷歌浏览器加前缀进行适配html{ &n
  • 前端技术
  • 编辑:云技术
  • 时间:2022-04-20 15:06
  • 阅读:400
  • HTML5实现移动端点击翻牌功能教程详解
  • HTML5实现移动端点击翻牌功能教程详解
  • 今天带来HTML5实现移动端点击翻牌功能教程详解效果一个大小的两个面,在同一位置上正面的Y轴旋转为0度背面的Y轴旋转180度隐藏被旋转的div元素的背面(backface-visibility)点击的时候同时改变正面和背面的旋转角度,给一个动画的时间(transition)记得换图片路径哦~显示复制    
  • 系统环境
  • 编辑:云技术
  • 时间:2022-04-19 14:05
  • 阅读:234
  • html5 拖拽及用 js 实现拖拽功能的示例代码教程详解
  • html5 拖拽及用 js 实现拖拽功能的示例代码教程详解
  • 今天带来html5拖拽及用js实现拖拽功能的示例代码教程详解1.HTML5拖拽1.1相关知识拖拽元素:可以为元素添加 draggable=”true”来让元素能够被拖拽。拖拽元素的事件监听:(应用于拖拽元素)ondragstart当拖拽开始时调用ondragleave 当鼠标离开拖拽元素时调用ondragend 当拖拽结束时调用ondrag 整个拖拽过程都会调用目标
  • 系统环境
  • 编辑:云技术
  • 时间:2022-04-19 14:04
  • 阅读:123
  • html 指定页面字符集的两种方法教程详解
  • html 指定页面字符集的两种方法教程详解
  • 今天带来html指定页面字符集的两种方法教程详解1.html指定页面字符集的两种方式  方式一:显示复制    方式二:显示复制
  • 前端技术
  • 编辑:云技术
  • 时间:2022-04-19 14:03
  • 阅读:374
联系我们
Q Q:44825217
电话:400-663-6698
邮箱:admin#kuhuyun.com
时间:08:00 - 18:00
客服中心
技术客服 全国热线
400-663-6698
公众号

关注微信公众号
返回顶部