中文Chrome最小字体问题

mochixuan 发布于2019-08-29 11:33 / 3281人阅读

摘要：问题中文中最小字体为，设置更小字体的解决办法解决办法移动端的浏览器，禁止浏览器配置调整网页的字体大小，可以通过属性来禁止网页调整字体大小，该属性用来设定文字大小是否根据设备浏览器来自动调整显示大小，，可以支持。

问题：中文Chrome中最小字体为12px，设置更小字体的解决办法

解决办法：

移动端的Chrome浏览器，禁止webkit浏览器配置调整网页的字体大小，可以通过CSS属性
-webkit-text-size-adjust来禁止网页调整字体大小，该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小，safari 3.0+，chrome 1.0+可以支持。属性值，可以为三种：

percentage：字体显示的大小

auto：默认，字体大小会根据设备/浏览器来自动调整

none:字体大小不会自动调整

    .fs-8 {
       -webkit-text-size-adjust: none;
       font-size: 8px; 
    }

注意:

不合理的使用-webkit-text-size-adjust:none会造成许多不好的影响。比如将其定义为全局属性的话，在Chrome中当用户放大缩小页面（PC上按住Ctrl滚动鼠标滚轮可缩放网页）的时候，文字却维持定义的大小而不放缩，给用户带来的不太友好的体验。所以我们在使用时，最好定义为局部有效。

由于没有 -o-text-size-adjust，这样的CSS 属性，在 Opera，我们就只能通过自己手动设置了：工具->首选项->高级->字体->最小字体大小（像素）。

PC端的Chrome浏览器，Chrome 27正式取消了-webkit-text-size-adjust属性的支持，在PC端使用该属性都不会起作用，控制台会显示Unknown property name。解决办法是使用CSS3中的transform, 该该元素缩小n倍，如：

.fs-10 {
    font-size: 12px;
    width: 118%;

    -webkit-transform: scale(0.82) translate(-9%, 0px);
    -moz-transform: scale(0.82) translate(-9%, 0px);
    -ms-transform: scale(0.82) translate(-9%, 0px);
    -o-transform: scale(0.82) translate(-9%, 0px);
    transform: scale(0.82) translate(-9%, 0px);
}

// sass mixin
@mixin webkit-font-size($size: 10) {
  font-size: 12px;
  width: percentage((1 - $size / 12) + 1);

  -webkit-transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
  -moz-transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
  -ms-transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
  -o-transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
  transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
}

服务器托管云服务器 html取消最小字体最小化问题中文字体安装中文字体

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111723.html

一篇文章了解移动端文本垂直居中

摘要：经常我们在浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题最经常遇见莫过于中文字稍微偏上了。为什么中文本偏上文本都会有一个内容区域，这个区域就是我们选中文本时展示的区域。在日常工作中，经常会遇到图片+文字+背景色的设计稿实现。经常我们在Chrome浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题——最经常遇见莫过于Android中文字稍微偏上了。在iOS和An...

sutaking 2019-08-23 13:50 评论0 收藏0
一篇文章了解移动端文本垂直居中

摘要：经常我们在浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题最经常遇见莫过于中文字稍微偏上了。为什么中文本偏上文本都会有一个内容区域，这个区域就是我们选中文本时展示的区域。在日常工作中，经常会遇到图片+文字+背景色的设计稿实现。经常我们在Chrome浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题——最经常遇见莫过于Android中文字稍微偏上了。在iOS和An...

Vultr 2019-08-29 17:28 评论0 收藏0
一篇文章了解移动端文本垂直居中

摘要：经常我们在浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题最经常遇见莫过于中文字稍微偏上了。为什么中文本偏上文本都会有一个内容区域，这个区域就是我们选中文本时展示的区域。在日常工作中，经常会遇到图片+文字+背景色的设计稿实现。经常我们在Chrome浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题——最经常遇见莫过于Android中文字稍微偏上了。在iOS和An...

Cympros 2019-08-05 15:38 评论0 收藏0
最标准的系统字体规范font-family

摘要：最标准的系统字体规范注意系统默认字体和浏览器默认字体这个差别。值得一提的是，上默认的中文字体渲染是华文黑体，而非作为系统字体的苹方即冬青黑体，是我们整个中唯一不是系统字体的字体。我们标准化的核心思路是使用系统字体。最标准的系统字体规范font-family 注意系统默认字体和浏览器默认字体这个差别。直接提供方案： font: 14px/1.6 /*西文*/-apple-syste...

kk_miles 2019-08-29 13:43 评论0 收藏0
centos使用chrome-cli、chromium或wkhtmltoimage截图时出现的中文字

摘要：后来换了各种系统环境，包括更改中文支持，依然如故，只有在自己的上是正常的。查看是否有中文字体，一般情况下是不存在的，否则也不会乱码。再一次运行程序脚本，查看截图是否包含正常的中文字符。在centos7环境下使用chrome-php或wkhtmltoimage截图时出现的中文乱码解决方案最近做了一个小项目，要求使用chrome/chromium对抓取的页面进行截图保存并上传云服务，因...

ivyzhang 2019-07-01 12:37 评论0 收藏0