您现在的位置是:网站首页> 编程资料编程资料
Chrome的最小字体12px限制最终解决办法Win7下Chrome字体渲染颜色太淡颜色不够黑的解决方法解决中文版Chrome下网页不能显示小于12px字体关于Chrome浏览器字体显示的太小不一的bug处理
2021-09-03
943人已围观
简介 这篇文章主要介绍了Chrome的最小字体12px限制最终解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
相信不少做网站的用户会有这样一个问题,Chrome 默认最小字体是12px(最新版英文也有此问题),这个是 Chrome 为了更好显示中文设计的,但是这样一来就会出现某些上标、下标字体过大,影响用户体验。之前在开发Hybid App的时候也被它困扰了很久,在百度上查了很久,网上所有的解决方案都惊奇地相似,只有下面两种:
1-针对谷歌浏览器加前缀进行适配
html{ -webkit-text-size-adjust:none; }给html标签加上下面一个属性,然而,当我打开浏览器时,发现并没什么用,后来发现这个属性在chrome 27版本以后被废弃了,可真烦呢!
2-利用css3的transform属性
这是一段文字
.mini-font{ font-size: 12px; -webkit-transform-origin-x: 0; -webkit-transform: scale(0.90); }这种方法是利用了css3的缩放属性,即:将文字大小整体缩小为原来的0.9倍,但是有一个硬伤,他只是缩小了文字的大小,并不能将文字所占的区域大小缩小,即无法缩小元素的width和height,这就很难受了
3-最终解决办法!!!!从浏览器设置入手
尝试了前2种方法,我发现并没有用,无奈我使用了手机模拟器器进行调试,发现可以将字体设置为10px或者更小,于是乎我就在思考是不是谷歌浏览器本身限制了最小字体大小???于是乎,我打开浏览器,开始慢慢摸索,终于找到根治的办法了
1.打开浏览器,找到“设置”

2.搜搜“字体”

3.点击“自定义字体”

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

5.然后,问题就解决啦,其实根本就是谷歌浏览器本身对字体做了最小值限制,因为后来我用ie和火狐浏览器调试的时候,字体是可以设置成10px和8px的,这让我更加怀疑是谷歌浏览器的问题,而不是css代码有问题。
到此这篇关于Chrome的最小字体12px限制最终解决办法的文章就介绍到这了,更多相关Chrome最小字体内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
相关内容
- CSS3 对过渡(transition)进行调速以及延时用css3实现转换过渡和动画效果CSS3实现类似翻书效果的过渡动画的示例代码css3动画过渡实现鼠标跟随导航效果CSS3实现伪类hover离开时平滑过渡效果示例css3过渡_动力节点Java学院整理详解Css3新特性应用之过渡与动画CSS3中的元素过渡属性transition示例详解CSS3过渡transition效果实例介绍
- css实现文字在背景图片之上CSS实现背景图片屏幕自适应的实现一篇文章带你学习CSS3图片边框CSS世界--代码实践之图片alt信息呈现
- css3 利用transform打造走动的2D时钟纯CSS3实现运行时钟的示例代码css3一个简易的 LED 数字时钟实现方法利用CSS3 动画 绘画 圆形动态时钟CSS实现漂亮的时钟动画效果的实例代码
- 详解CSS3中常用的样式【基本文本和字体样式】HTML外部样式表如何引入CSS样式编程式处理Css样式的示例代码CSS 选择所有子元素添加样式的方法CSS常用样式之绘制双箭头的示例代码详解中文字体在CSS样式中font-family对应的英文名称CSS实现鼠标悬停改变其他标签样式的示例代码解决ElementUI自定义CSS样式不生效的问题
- 编程式处理Css样式的示例代码HTML外部样式表如何引入CSS样式详解CSS3中常用的样式【基本文本和字体样式】CSS 选择所有子元素添加样式的方法CSS常用样式之绘制双箭头的示例代码详解中文字体在CSS样式中font-family对应的英文名称CSS实现鼠标悬停改变其他标签样式的示例代码解决ElementUI自定义CSS样式不生效的问题
- 详解css3使用transform出现字体模糊的解决办法CSS3 translate导致字体模糊的实例代码
- css3实现文字首尾衔接跑马灯的示例代码结合 CSS3 transition transform 实现简单的跑马灯效果的示例
- 使用CSS伪元素控制连续几个元素的样式方法使用CSS的clip-path属性实现不规则图形的显示使用css实现特殊标志或图形css如何绘制特殊图形的方法示例详解常用css样式(布局)详解CSS3中常用的样式【基本文本和字体样式】编程式处理Css样式的示例代码纯CSS3 gradient属性制作36种漂亮的html网页渐变按钮样式css样式常见图形效果展示的实例代码
- 详解CSS边距重叠与解决方案探究CSS 外边距(margin)重叠及防止方法详解css边距重叠的几种解决方案
- 使用flex布局轻松实现页面布局的示例代码flex是什么及flex布局语法教程详解详解flex布局下图片变形的解决方法Flex布局让子项保持自身高度的实现css3 flex布局实现平均分配元素的示例代码flex布局实现上下固定中间滑动的布局方式flex布局实现无缝滚动的示例代码Flex移动布局中单行和双行布局的区别及使用详解CSS3新增布局之: flex详解flex布局实现每行固定数量+自适应布局浅谈Flex布局与缩放比例计算
