Chrome字型大小12px解鎖

Chrome字型大小12px解鎖

  你是否也在設計網站時遇到Chrome瀏覽器的字型大小font-size無法小於12px呢?我今天即是遇到這個腦人的問題!

  若你的工作範圍包含網頁設計或使用使體驗,將IEFirefox以及Chrome三個瀏覽器的外觀調整至美觀,IE6之下則是起碼要做到正常閱讀,是必須做好的功課。

為什麼在Chrome下設定字體小於12px沒有效果?

  那是因為,Chrome為了避免字型過小不利閱讀,將字體最小的下限設在了【12px】,它帶來的問題之一是當你使用「CSS圖片取代文字」技巧時可能會不能夠將字體大小設到很小,解決方案相當簡單,你只要在需要設到12px以下的元素加上這串CSS即可。

-webkit-text-size-adjust:none;

  當你把值設為「none」時就能將字縮到更小,但是要注意的是這串指令會導致此元素的文字不能夠縮放,請慎用!比如不要將此指令用在文章內文之中或大面積的文字元素中。

在使用了此串CSS後,若是你的元素是「連結」,而使用後在Chrome中此連結的底線失效了,請再加入以下指令即可:
display:inline-block;

  經營網站SEO的排名只能當作是網路行銷中重要的一塊但不是全部,如果你可以讓使用者看到的頁面明瞭易讀,標題文字吸引人,相信能讓你的網站成交率及停留時間得以增長,共勉之!

魔鬼,就藏在細節之中

欲練神功-Chrome字型大小12px解鎖