<samp id="wiaeu"><label id="wiaeu"></label></samp>
  • <samp id="wiaeu"><label id="wiaeu"></label></samp>
    <samp id="wiaeu"></samp>
  • <samp id="wiaeu"><sup id="wiaeu"></sup></samp>
  • 技術頻道導航
    HTML/CSS
    .NET技術
    IIS技術
    PHP技術
    Js/JQuery
    Photoshop
    Fireworks
    服務器技術
    操作系統
    網站運營

    贊助商

    分類目錄

    贊助商

    最新文章

    搜索

    把字體大小設置小于12px,所有瀏覽器通過(包括Chrome)

    作者:admin    時間:2022-5-6 10:21:1    瀏覽:

    對于Chrome瀏覽器,默認情況下,12px已經是網頁字體的最小大小了,但是我們有時想把頁面某個模塊的字體大小設置得更小,小到小于12px,那該怎么辦呢?現在問題解決了,所有瀏覽器測試有效(包括Chrome),把字體設置小于12px。

    實例

    完整HTML代碼

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title></title>

      <style type="text/css">

      div.div1{
        font-size:12px;
      }
      div.div2{
        font-size:8px;
    transform:scale(0.8) translate(-240px,0);
      }
        /* firefox */
      @-moz-document url-prefix(){
        div.div2{
          transform:scale(1.0);
    }
      }
        /* IE11+ */
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)  {
        div.div2{
          transform:scale(1.0);
    }
    }
      </style>
    </head>
    <body>
       <div class="div1">
          卡卡網 www.organiccannabisseed.com
       </div>
       <div class="div2">
          卡卡網 www.organiccannabisseed.com
       </div>
    </body>

    </html>

    demodownload

    顯示效果

     

    上面代碼在Chrome、Firefox、IE11瀏覽器測試通過。

    代碼分析

    代碼使用了transform:scale(0.8) translate(-240px,0);這個CSS屬性,但這個CSS定義是針對Chrome而寫的,因為Firefox、IE11不需要這個定義。

    因此,CSS里還需要針對Firefox、IE11去除前面為Chrome而寫的transform的定義,否則在Firefox、IE11瀏覽器會顯示錯位!

    另外要注意的是,scale()translate()的設置,在寫代碼時需要調整它們的數值,調到文字位于合適的位置為止。而針對Firefox和IE11的CSS,它們的scale(1.0)不用再調整。

    transform 屬性

    transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

    scale():定義 2D 縮放轉換。

    scaleX(x):通過設置 X 軸的值來定義縮放轉換。

    scaleY(y):通過設置 Y 軸的值來定義縮放轉換。

    translate():定義 2D 轉換。

    translateX(x):定義轉換,只是用 X 軸的值。

    translateY(y):定義轉換,只是用 Y 軸的值。

    總結

    本文介紹了如何設置文字小于12px,不但在Chrome有效,并且不會對其他瀏覽器產生影響。

    參考文章

    標簽: 字體大小設置  12px  
    相關文章
      • IT熱文
      • 站長推薦
      公与熄电影手婬之手,日本少妇毛多水多的视频,要看肉感BBwBBWBBWBBw高清
      <samp id="wiaeu"><label id="wiaeu"></label></samp>
    • <samp id="wiaeu"><label id="wiaeu"></label></samp>
      <samp id="wiaeu"></samp>
    • <samp id="wiaeu"><sup id="wiaeu"></sup></samp>