如何设置小于12px的像素字体

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

(具体效果可点击文末左下方阅读原文即可体验)

背景

在前端页面中,有时,字体的大小要求小于12px,对于更小的字体,没办法在更小了的,对于更小的字体,那是如何实现的呢

具体实现

以下是使用svg方式实现的

<svg width="97.515625" height="11.52"><textdominant-baseline="baseline"font-size="10"y="9.52"style="line-height: 1; vertical-align: middle;">随笔川迹 -itclanCoder</text>
</svg>

如果你直接把这段代码放到一个文件命名为xxx.svg,在浏览器中打开会直接输出代码,要想在浏览器中看到具体效果,只需要按照svg的格式就可以了的,如下所示

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"  width="144" height="144"><defs><style type="text/css"></style></defs><textdominant-baseline="baseline"font-size="10"y="9.52"style="line-height: 1; vertical-align: middle;">随笔川迹 -itclanCoder</text></svg>

以上我把svg的宽度设置了144X144的,如果设置太小,那在浏览器里看到会很小,不便于调试

你可以改变text中的font-size值,便会看到字体大小

注意事项

以上是使用 svg 作为解决小于 12px 字号文字的方案
使用 transform: scale()设置后占位区域并没有改变,难以调节对齐方式
使用 canvas 无法选中文字（不如 svg 简洁,方便）

爱客来免费证件照制作

记账就用轻记账

文章都看完了不点个在看吗

戳原文，即可阅读原文哦

如何设置小于12px的像素字体相关推荐

浏览器支持字体大小情况以及 Chrome设置小于12px的字体的处理方案
一.浏览器默认字体大小转载:https://www.zhihu.com/question/268477963 二.浏览器支持的最小font-size 转载:https://www.jianshu.c ...
html怎么设置字体小于12px,前端浏览器字体小于12px的解决办法
前言最近做项目时,UI设计的字体10px,看效果图时发现字体仍然蛮大,改变12px时字体还是那么大,改变到14px时,字体变大了,发现规律,才知道原来浏览器为了让用户字体看的清楚,最小设置为12px ...
移动端设置小于12px 字体初探
1.移动端字号规范 2. 百度字号调研 3. 绕过12px 限制 4. 缩放 5. chrome 字号转载于:https://www.cnblogs.com/yingwo/p/4645595.ht ...
CSS_设置小于12px的字体，小字体设置
使用transform技巧 <div class="text">text</div> <style>.text{font-size: 12px; ...
如何在chrome浏览器下设置12px以下的字体
chrome chrome浏览器的默认字体大小是16px,它所能支持设置的最小字体大小是12px,也就是说,当你使用font-size属性设置到12px以下的时候字体大小不再改变.现在提供解决方案. ...
设置浏览器显示小于12px以下字体的三种方法
使用场景: 以往设计图给的字号一般最小就是12px, 开发人员一般是使用谷歌浏览器来进行调试运行. 谷歌浏览器上显示字体最小为12px,css设置font-size:10px,运行代码显示结果仍然是1 ...
怎么用css设置字体小于12px
因为浏览器的限制,网页上的字体最小只能设置12px,因为小于12px就会影响浏览效果但是有时候我们需要将字体设置的很小这就需要用到特殊的手段用 transform属性设置用 transform的 ...
Chrome浏览器不支持字体小于12px的解决办法
谷歌浏览器默认最小字体为12px,小于12px的字体它都以12px显示,具体效果见下图.有些特殊情况下我们需要字体小点,特别是在制作英文网站的时候,怎么办?既然有问题,我们就有解决问题的方法. < ...
中文代码谷歌_Chrome谷歌浏览器下不支持css字体小于12px的解决办法
先来看下 ie.火狐.谷歌浏览器下各个字体显示情况ie下: 火狐下: 谷歌下: 从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px; 那么网上一直 ...

如何设置小于12px的像素字体

背景

具体实现

如何设置小于12px的像素字体相关推荐

最新文章

热门文章