Chrome 最小字形 12px 限制

最新推荐文章于 2024-01-08 16:46:03 发布

abxn2002

最新推荐文章于 2024-01-08 16:46:03 发布

阅读量917

点赞数

分类专栏：前端学习笔记

前端学习笔记专栏收录该内容

99 篇文章 0 订阅

订阅专栏

转载地址: http://www.dotblogs.com.tw/shunnien/archive/2013/06/07/105380.aspx

chrome 瀏覽器會將字型小於 12px 的字形, 預設為 12px 所以只要使用 12px 以下的字, 都會呈現 12px 的樣式；調整 css ，以往的做法都是使用 -webkit-text-size-adjust : 100%

但新版 Chrome 已經不支援 -webkit-text-size-adjust , 所以目前改用 -webkit-transform 的方式來達到，

使用 transform 要視情況以 display:inline-block 來進行轉換。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Chrome Font Demo </title>
</head>
<body>
    <div style="font-size:18px; "> 18px 字型大小</div>
    <div style="font-size:16px; "> 16px 字型大小</div>
    <div style="font-size:14px; "> 14px 字型大小</div>
    <div style="font-size:12px; "> 12px 字型大小</div>
    <div style="font-size:11px; -webkit-transform:scale(0.91);"> 11px 字型大小</div>
    <div style="font-size:10px; -webkit-transform:scale(0.83);"> 10px 字型大小</div>
    <div style="font-size:9px; -webkit-transform:scale(0.75); "> 9px 字型大小</div>
    <div style="font-size:8px; -webkit-transform:scale(0.66); "> 8px 字型大小</div>
</body>
</html>

使用 chrome 沒有設定 inline-block 就跑版了, 加上 inline-block

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Chrome Font Demo </title>
</head>
<body>
    <div style="font-size:18px; "> 18px 字型大小</div>
    <div style="font-size:16px; "> 16px 字型大小</div>
    <div style="font-size:14px; "> 14px 字型大小</div>
    <div style="font-size:12px; "> 12px 字型大小</div>
    <div style="font-size:11px; -webkit-transform:scale(0.91); display:inline-block"> 11px 字型大小</div>
    <div style="font-size:10px; -webkit-transform:scale(0.83); display:inline-block"> 10px 字型大小</div>
    <div style="font-size:9px; -webkit-transform:scale(0.75); display:inline-block"> 9px 字型大小</div>
    <div style="font-size:8px; -webkit-transform:scale(0.66); display:inline-block"> 8px 字型大小</div>
</body>
</html>

另外scale(0.91)裡面的數值是以 chrome 最小字型12px去計算轉換倍率，例如：9px為9/12 = 0.75 這樣。