字體系列中的第三個字體明顯更大

對於我的website我選擇在我的字體系列中使用一些相當晦澀的字體。最知名的字體（家族第三）是世紀哥特式，大多數電腦都有。字體系列中的第三個字體明顯更大

font-family:Tw Cen MT,Gill Sans,Century Gothic,sans-serif;

的問題是，12px的字體在世紀的哥特式遠比繁體岑MT &吉爾三世一個12px的字體更大。如果一臺電腦退回到世紀哥特式，那麼字體就會變得混亂。我需要一個Jquery解決方案，它說世紀哥特式的字體大小是正常值的75％。我不需要它來檢測字體。我只需要說，如果正在使用百年gotchi，使字體大小爲正常值的75％。任何解決方案

來源

2010-01-22 JCHASE11

不能在標準的CSS它不是。 – 2010-01-22 16:35:32

你可以嘗試使用百分比大小而不是px？我不確定它會用字體大小來解決您的問題，但至少可以讓所有瀏覽器都選擇調整文本大小（一些半舊的瀏覽器會將px大小視爲死亡，而不允許用戶調整文本大小）。 – 2010-01-22 16:41:44

您可以使用JavaScript或不使用該字體。 – 2010-01-22 16:45:28

我認爲這個問題是世紀哥特的相對較高的x高度。在您的font-size聲明中嘗試使用ex單位。 ex單位基於身高，不像em,px和pt。

將line-height設置爲像素大小也有助於標準化高度，但會爲在瀏覽器中更改文本縮放級別的用戶造成問題。

編輯：我回去測試了，前單位沒有幫助。世紀哥特比其他人更高更寬。

問題是，DOM將而不是允許您從列出的備選項中分辨出用戶具有哪種特定字體，並且CSS不允許爲每種字體分別設置字體大小（或調整）。

但是，jQuery 可以測試一個文本容器的大小。因此，如果您在頁面上提供隱藏元素，並且其中包含已知字母，則可以在用戶的瀏覽器上測試該元素的寬度。

由於該字母的寬度將由用戶安裝的字體決定，因此您可以將該寬度與自己計算機上首選字體中相同文本的寬度進行比較，然後計算用戶的字體大小大致符合你的意圖。

示例代碼：

<style> 
    p { font-size: 15pt; 
     font-family:"Tw Cen MT","Gill Sans","Century Gothic",sans-serif; 
    } 
    p#testwidth { 
    /* Ensure test is invisible and isn't messed up with borders, etc. */ 
    margin:0; padding:0; border:none; color:white; display:inline; 
    } 
</style> 

<p>Your text goes here.</p> 
<p id="testwidth">m</p> 

<script language="Javascript"> 
    window.onload = function() { 
     // Same as your default CSS for font-size (just the number, not the units) 
     var desiredFontSize = 15; 
     // Experiment by testing width when Tw Cen MT *is* available. In pixels. 
     var expectedWidth = 17; 
     // width found will depend which font is available 
     var testedWidth = $('#testwidth').width(); 
     // ratio, rounded to one decimal point 
     var normalizedFontSize = Math.round( 
      expectedWidth/testedWidth * desiredFontSize * 10)/10; 
     // change the stylesheet to "fix" the font size (in your preferred units) 
     $('p').css('font-size', normalizedFontSize + 'pt'); 
     }

四告誡：

它不一定會克服每在大小兩個交替的字體之間的差異。垂直對齊等可能不完美，如果他們沒有你的首選字體。
它可能會惹惱在瀏覽器中設置了默認文本縮放級別的用戶，因爲這會在頁面加載時強制實現字體大小。幸運的是，它們仍然可以根據需要放大或縮小，並覆蓋強制字體大小。
我似乎記得IE瀏覽器在小數點後有許多數字的字體大小問題，所以我四捨五入。應該足夠接近。
我使用了單個字母「m」的寬度。如果你想得到更準確的結果，你可以使用一個更長的字符串提供它不包裹在用戶的瀏覽器（這將打破寬度測試）。一些大小寫字母和空格應該是一個很好的測試。

來源

2010-01-22 18:15:13 richardtallent

嘗試了基於em的單元，問題仍然存在。它只是一個整體較大的字體x和y。我只需要縮小它。文本縮放如何工作？ – JCHASE11 2010-01-22 18:29:18

@ JCHASE11：重新閱讀他說的話。他*同意你的意見，他們的單位將無法正常工作，並暗示可能。 – egrunin 2010-01-24 04:53:00

非常感謝你，很棒的理念 – JCHASE11 2010-01-29 00:38:13