itclancoder

V1

2022/01/05阅读:39主题:绿意

如何设置小于12px像素

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

背景

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

具体实现

具体效果可见:如何设置小于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值,便会看到字体大小

注意事项

  1. 以上是使用 svg 作为解决小于 12px 字号文字的方案

  2. 使用 transform: scale()设置后占位区域并没有改变,难以调节对齐方式

  3. 使用 canvas 无法选中文字(不如 svg 简洁,方便)

原文出处-如何设置小于12px像素字体大小

分类:

前端

标签:

前端

作者介绍

itclancoder
V1

微公号:itclanCoder