使用场景：

以往设计图给的字号一般最小就是12px，开发人员一般是使用谷歌浏览器来进行调试运行。
谷歌浏览器上显示字体最小为12px，css设置font-size：10px，运行代码显示结果仍然是12px大小，但是挡不住甲方有时就是强调使用的字号，必须是特别小的字号，就比如说某些网站设计的噱头–“买房送老婆”，但其实你不知道的是，在“老婆”两个字之后，还有一个小到你需要用放大镜去看的“饼”字，就问你惊不惊喜，意不意外？

问题描述

谷歌浏览器，以及最近将取代IE的Edge浏览器，显示小于12px字号的解决办法

了解一点开发的人都知道，谷歌浏览器显示的最小字号就是12px，即使你设定的字体为10px，默认显示的也是12px，当然除了谷歌之外，新出的Edge浏览器也有同样的问题，主要原因还是因为内核使用的是同一个，常用的浏览器除了这两个之外，其实IE、火狐浏览器、移动端等小于12px的字号大小还是可以正常显示的。下图是我自己做的一个实验，结果如图所示：

试想若是全篇文字8px大小，阅读的时候得有多费眼睛，估计大多数人看到这么小的字体之后，都会自觉放大页面也去看吧？其实最小字号12px只是谷歌浏览器的一个默认的基础值设定，只是为了不影响正常阅读而已，既然是设定值，那理所当然是可以更改的。

解决方案一：

更改谷歌浏览器的基础设定12px值，用来解决开发人员的调试问题

步骤：

点开浏览器右上角的三个点，点击“设置”
选择“外观”，找到“自定义字体”，在自定义字体中找到“最小字号”，将最小字号的进度条直接拉到最左边，这就表示最小字号是多少由你说了算。
如果你找不到自定义字体这个选项，你也可以直接在设置页面最上面的搜索框里，直接输入字号，回车，页面会自动筛选出相应设置项，然后一样修改就可以了。在这个页面你可以看到，不仅可以修改默认的最小字号，还可以修改默认显示的字号、字体样式等
老版本的可能是在“显示高级设置…”里，如果根据我的提示，你还是找不到，那我还是建议你更新浏览器版本吧。

在这之前有人说使用-webkit-text-size-adjust: none;解除字号限制，不过不知道为啥，我看着页面并没有效果，可能是现在已经废除了这种写法。
第一种解决方法是让开发人员用来调试代码，这样可以更直观的观察，其他浏览器小于12px字号的显示大小效果，因为除了谷歌、edge之外，常用的浏览器字号是能正常显示的。
但是这种方法并没有解决谷歌浏览器在普通用户页面的显示效果，接下来，我们使用第二种办法。

解决方案二：

使用缩放transform:scale()，使用较为广泛

优点：单行、多行文本都可使用
缺点：只是视觉效果变小，并不会改变盒子的实际占位，在对齐其他盒子时不太友好

步骤：

<div>文本</div>
文本嵌套块标签，这是因为缩放只对有宽高的标签有效，缩放的时候也是将标签一起缩放，而不仅仅是缩放文本，所以如果使用span等行内标签时，还需要将行内标签进行元素转换为块元素（display:block;）
font-size：12px；
给文本设置字体12px，并设置缩放值为10/12=0.83333，也就是transform:scale(0.83)；如果要设置8px，那就是8/12=0.66666
transform-origin：0 0；
默认缩放中心点是在盒子的正中心，所以如果我们需要文本左对齐，就需要改变中心点，也就是transform-origin：0 0；该值有两个参数值，第一个是水平方位值，第二个是垂直方位值，对应的如果需要右对齐、或者是有缩进，那就改变对应的参数值即可。
white-space: nowrap;
文本进行缩放后，并不会改变其原来盒子的大小，只是视觉上改变了大小，也就是说如果文本有换行的时候，它进行缩放后仍然是折行显示，这显然不符合我们要求，所以我们还需要强制文本在一行显示，也就是 white-space: nowrap;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 30px;margin-bottom: 5px;background: rgb(206, 151, 151);}.box1 {font-size: 12px;}.box2 {font-size: 10px;transform: scale(0.83333);transform-origin: 0 0;white-space: nowrap;}</style>
</head>
<body><div class="box1">我是正常的12px的文字大小 Hello world!</div><div class="box1">我是正常的12px的文字大小 Hello world!</div><div class="box2">我是正常的10px的文字大小 Hello world!</div><div class="box2">我是正常的10px的文字大小 Hello world!</div>
</body>
</html>

解决方案三：

使用SVG 矢量图设置text
优点： 1px-12px任意字号均可设置，可对设计界面进行对齐调整
缺点：不支持多行文本

步骤：

在svg包含text标签，给svg设置宽高，文本内容写在text标签中；
因为svg是矢量图的概念，也就是说svg其实是一个图片，给图片内容进行缩放。实际的文本字号大小由text标签设置生效，但内容显示多少要看svg设置的宽高是多少，超出区域外的内容不会显示。
text标签的x y值这里必须用到的；
text的x和y值默认为0，x值表示文字左下角开始的x坐标；y值表示文字左下角开始的y坐标，一般文本显示都是左对齐，所以x值为0，y值为字号大小。当然，如果是右对齐或者居中对齐的x y的值则需要另外设置对应的值。注意：x y的值是写在标签后面，并且无单位！
text文本设置样式的方法和普通标签设置的方法不一样，例如文本颜色填充是用fill设置，并不是color；如果需要文本缩进，或者是距离顶部有多宽的间隙，需要使用dx和dy；
dx:文本在水平方向上移动的像素大小
dy:文本在垂直方向上移动的像素大小

该方法是可以设置任意字号大小，还能根据设计图的需要进行对齐调整，但svg没有换行符！！！所以文本并不支持换行显示，即使你设置的svg的宽高足够大，即使设置文本可以换行white-space: pre;也没有任何效果。也就是说，svg默认所有单个或连续多个空格、换行符等转为一个空格来显示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{font-size: 12px;}svg{width: 100px;height: 100px;background-color: chocolate;}svg text {font-size: 8px;}</style>
</head>
<body><div>我是最小12px字体大小 hello world！</div><svg><!-- svg是矢量图的概念方法，这里的文本并不支持换行显示，即使你设置的svg的宽高足够大 --><!-- text文本设置样式的方法和普通标签设置的方法不一样，例如文本颜色填充是用fill设置，并不是color --><text x="0" y="8" >我是10px字体大小 hello world！</text>></svg>
</body>
</html>

设置浏览器显示小于12px以下字体的三种方法相关推荐

【Unity3D游戏开发】NGUI制作字体的三种方法 (二一)
NGUI制作字体的三种方法主要参考两篇博文: (1).NGUI制作字体的三种方法 (2).使用位图字体工具BMFont从图片生成自定义字体 1.BMFont下载地址 http://www.angel ...
NGUI制作字体的三种方法
主要参考两篇博文: (1).NGUI制作字体的三种方法 (2).使用位图字体工具BMFont从图片生成自定义字体 1.BMFont下载地址 http://www.angelcode.com/produ ...
matlab怎么恢复默认字体,windows10下恢复系统默认字体的三种方法
一些朋友在更改win10系统界面默认字体后,会遇到设置界面显示不全的情况,此时我们只能将字体恢复成原来的样子.不过,由于大多用户不知道系统界面的默认字体是什么,导致无法恢复成正常状态.下面,系统城小编 ...
html手机不能自动播放音乐,解决移动端浏览器 HTML 音频不能自动播放的三种方法...
由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播放音频视频,默认屏蔽了autoplay,如果要想达到自动播放效果,需要单独处理,方法有以下几种: 第一种:添 ...
解决移动端浏览器 HTML 音频不能自动播放的三种方法
由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播放音频视频,默认屏蔽了autoplay,如果要想达到自动播放效果,需要单独处理,方法有以下几种: 第一种:添 ...
sublime 设置自动更新_Win10关闭自动更新的三种方法
Win10怎么关闭自动更新呢?很多人都不知道,下面小编来告诉大家. 第一种方法我们右击电脑左下角的微软按钮,弹出的界面,我们点击运行: 弹出的运行中,我们输入services.msc,之后点击确定: ...
微信小程序使用自定义字体的三种方法
一.loadFontFace接口小程序官方提供的接口,最便捷的加载字体的方法,不过限制颇多.必须https且同源,canvas等原生组件不支持.注意!!使用本地文件无效,必须使用网络地址. 官方文档 ...
Android 设置字体的三种方法（TypeFace）
Android系统默认字体支持四种字体,分别为: noraml (普通字体,系统默认使用的字体) sans(非衬线字体) serif (衬线字体) monospace(等宽字体) 除此之外还可以使用其 ...
python设置中文字体的三种方法
方法一 windows和linux设置字体的方法 import matplotlib font = {'family' : 'Microsoft YaHei','weight' : 'bold','s ...

设置浏览器显示小于12px以下字体的三种方法

使用场景：

问题描述

解决方案一：

解决方案二：

解决方案三：

设置浏览器显示小于12px以下字体的三种方法相关推荐

最新文章

热门文章