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;
        }