虽互不曾谋面,但希望能和您成为笔尖下的朋友
以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
标星公众号(ID:itclanCoder)
(具体效果可点击文末左下方阅读原文即可体验)
背景
在前端页面中,有时,字体的大小要求小于12px,对于更小的字体,没办法在更小了的,对于更小的字体,那是如何实现的呢
具体实现
以下是使用svg方式实现的
<svg width="97.515625" height="11.52">
<text
dominant-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>
<text
dominant-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 简洁,方便)
爱客来免费证件照制作
记账就用轻记账
文章都看完了不点个在看吗
戳原文,即可阅读原文哦