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

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

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

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

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

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

步骤：

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

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

步骤：

使用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默认所有单个或连续多个空格、换行符等转为一个空格来显示。