如何使文本在不同字體系列中顯示大致相同的大小? 我不能通過手動方式來做到這一點,它必須用軟件完成。如何讓不同的字體系列顯示相同的大小? (計算)
在我的web應用程序,用戶可以從許多不同的字體家庭選擇(所有谷歌網絡字體的對於初學者),我需要爲他們提供他們所選擇的字體,例如預覽相當於16px或其他。麻煩是不同的字體具有非常不同的視覺大小,例如蜜桔出現在Roboto或Open Sans的大小的一半左右,當預覽列表中的一種字體呈現其他大小的一半時,看起來很奇怪!
我已經嘗試了不同的CSS字體大小的測量單位,例如px,em,ex,繼承等等,但沒有任何對齊的尺寸,所以它們看起來幾乎都是相同的尺寸。
我想「EX」應該做的,但它似乎有使字體顯示在視覺上類似的尺寸(甚至儘管我的理解是它應該)沒有影響。 CSS字體大小調整屬性也不起作用 - 它只是Firefox的一個開始。
實施例下面的代碼。我可以做一個解決方案的前端(例如Javascript,我使用Bootstrap 3和JQuery)或後端(我的情況下是PHP)。
任何建議非常歡迎! 非常感謝。
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Old+Standard+TT' rel='stylesheet' type='text/css'>
</head>
<body>
<span style="font-family: 'Open Sans', sans-serif; font-size: 4ex; font-weight: normal;">Open Sans</span><br>
<span style="font-family: 'Roboto Slab', serif; font-size: 4ex; font-weight: normal;">Roboto</span><br>
<span style="font-family: 'Tangerine', cursive; font-size: 4ex; font-weight: normal;">Tangerine</span><br>
<span style="font-family: 'Josefin Slab', serif; font-size: 4ex; font-weight: normal;">Josefin Slab</span><br>
<span style="font-family: 'Old Standard TT', serif; font-size: 4ex; font-weight: normal;">Old Standard</span><br>
</body>
</html>
謝謝。但是,在那個小提琴中,字體沒有正確加載。將我的代碼的頭部放在HTML部分(忽略JSFiddle的警告)給你:[http://jsfiddle.net/fusjopap/](http://jsfiddle.net/fusjopap/),我已經替換了文本'橘'與xxxxxx,因爲這是什麼'EX'測量單位應該基於,無論如何,你可以看到字符明顯小於其他字體。我需要他們大致相同的視覺尺寸。謝謝! –
啊,我看到你的困境。我能想到的唯一真正的固體解決方案就是實際看到它們如何相互堆疊,並給它們每個尺寸應該是什麼樣子的定量,以使它們看起來像相同的物理尺寸,然後將每個尺寸字體到那個比例。儘管這將是一個巨大的工作量,尤其是對於很多字體而言,但目前看起來好像這是不可能的,因爲x高度不夠接近你想要的 –