HTML解决浏览器字体大小12px限制，实现自动适应大小

HTML解决浏览器字体大小12px限制，实现自动适应大小

一、现代浏览器为了能看清字体，限制了最小字体为12px,当小于12px时，设置不再生效。

网上的方法都是通过缩放，但缩放打印出来有明显的锯齿，不美观。今天介绍的是使用H5的矢量图标签
废话不多说，上代码：

<div style="font-size: 5px;width: 80px;height: 20px; 
margin-top: 5px; 
border-bottom: 1px solid black;display:inline-block;
padding-bottom:4px;">
 <svg width="100%" height="100%">
   <text x="5%" y="90%" fill="#000" text-anchor="left">显示内容</text>
  </svg>
</div>

代码关键点：
div的style
font-size:5px; //控制字体大小
width:80px;控制输出框大小

以上实现在最小字体的限制。

二、要实现自动适应，还得计算字数，多进行测试，本处用了最原始的方法，按字数进行手动适配。
以下为aspx.net 代码，只截取部分。这里直按写style,实际项目中要进行提练成class。
aspx文件部分：

<div style="font-size:  <%=PersonNameFont %>px;width: 80px;height: 20px; 
margin-top: 5px; 
border-bottom: 1px solid black;display:inline-block;
padding-bottom:4px;">
 <svg width="100%" height="100%">
   <text x="5%" y="90%" fill="#000" text-anchor="left">显示内容</text>
  </svg>
</div>

c#部分：

        public int PersonNameFont=18;
          protected void Page_Load(object sender, EventArgs e){
           PersonNameFont = GetPersonNameFont("显示内容");
              }
          }
        
        
                /// <summary>
        /// 返回字母以下字数
        /// </summary>
        /// <param name="s"></param>
        /// <returns></returns>
        private int getcharLength(string s)
        {
            int lz = 0;
            char[] q = s.ToLower().ToCharArray();//大写字母转换成小写字母
            for (int i = 0; i < q.Length; i++)
            {
                if ((int)q[i] <= 122)//小写字母
                {
                    lz += 1;
                }
            }
            return lz;
        }

        /// <summary>
        /// 返回字节数
        /// </summary>
        /// <param name="s"></param>
        /// <returns></returns>
        private int getByteLength(string s)
        {
            int lh = 0;
            char[] q = s.ToCharArray();
            for (int i = 0; i < q.Length; i++)
            {
                if ((int)q[i] >= 0x4E00 && (int)q[i] <= 0x9FA5) // 汉字
                {
                    lh += 2;
                }
                else
                {
                    lh += 1;
                }
            }
            return lh;
        }

        private int GetPersonNameFont(string personName)
        {
            int result = 0;
            //WriteLog("getcharLength(personName):" + getcharLength(personName).ToString());
            //WriteLog("getByteLength(personName):" + getByteLength(personName).ToString());
            int len = Convert.ToInt32(Math.Ceiling((getcharLength(personName) +getByteLength(personName))/ 2.0));
            if (len<5){
                result = 16;
            } else if (len==5){
                 result = 15;
            }else if (len==6){
                 result = 12;
            }else if (len==7){
                 result = 10;
            }else if (len==8){
                 result = 9;
            }
            else {
                result = 8;
            }

            return result;
        }