自定義字體在Chrome/Safari瀏覽器沒有渲染

我使用的CSS方法來呈現從fonts.com字體在CSS類使用的字體名稱，如自定義字體在Chrome/Safari瀏覽器沒有渲染

.myFont h3 { 
    background-color: #FFFFFF; 
    color: #000000; 
    font-family: "ReformaGroteskW01-Mediu"; 
    font-size: 40px; 
    font-weight: normal; 
    letter-spacing: 0.04em; 
    margin: 0 auto; 
    padding: 0 7px; 
    text-transform: uppercase; 
    width: 105px;

}

和字體鏈接使用fonts.com提供的鏈接標籤，這適用於Firefox，但不適用於chome和Safari，看起來webkit瀏覽器並沒有鏈接這裏的東西，我會作爲fonts.com的支持，但我已經找到了他們的支持過去非常緩慢。

<link type="text/css" rel="stylesheet" href="http://fast.fonts.com/cssapi/11386172-45ea-43f5-93bd-d795e60c00af.css">

來源

2012-10-23 Grundizer

你能提供一個鏈接到演示頁面嗎？ fonts.com API將只允許該字體顯示在您的網絡用戶界面中添加的域中，因此如果不能看到實際示例，就很難進行調試。 –

在Chorme的控制檯中，它說「資源解釋爲字體，但是使用MIME類型text/html傳輸。」 GET http：//fast.fonts.com/d/7e24 ... 403（Forbidden） – Grundizer

因此，爲了澄清，你有沒有聯繫過fonts.com的支持？ – djangodude

爲什麼不下載你喜歡的字體並將它放在你的文件中？這樣更好，也可能解決你的問題。

此外，不要使用font-family和font-size分開。將它們放在font標記中。

來源

2012-10-23 16:03:15 user1717526

+19

有沒有令人信服的理由使用'字體'速記，它有其缺陷，並且與手頭的問題無關。 –

您沒有描述它在哪種意義上對Chrome不起作用，但似乎您指的是次要渲染問題：在Chrome上，字體以較粗的筆觸呈現。這是你應該與字體服務的提供者討論的東西。

字體已被加載並在Chrome中使用，正如您通過刪除font-family:"ReformaGroteskW01-Mediu"來編輯CSS代碼所看到的。所以這是一個字體執行問題的質量。

來源

2012-10-23 18:51:04

很抱歉，您有困難！看看你的Fonts.com Web Fonts項目，它似乎已經發布了幾個小時前的一些更改（大約在此響應之前四個小時，在您的StackOverflow發佈幾個小時後）。目前，在我們的一些測試機器的幾個瀏覽器中加載示例鏈接（http://www.fabricproperty.com/）時，項目的字體會正確加載並顯示。我也會跟進你的Fonts.com支持服務。

來源

2012-10-24 13:46:15

我意識到這個評論是在討論這個問題幾個月之後才發現的;然而，我自己也遇到了這個問題，並且正在尋找解決方案，並在此處着陸。 font.com提供的字體在Firefox中正確解析，但不在Chrome或Safari中正確解析。我最終通過在font.com的域配置中指定www.domainname.com和domainname.com來解決問題。原來Chrome和Safari都對此敏感。（很明顯，font.com的域配置比typekit的靈活性要低，其中輸入* .domainname.com時會自動包含domain.com和www.domainname.com。）希望這可以幫助某人！

來源

2013-06-05 15:59:38 carol

或者有時爲了測試的目的，ip地址也應該添加在列表中：' - * .domain.com - www.domain.com - 5.100.30.10' – Silvan

這個答案應該有更多的upvotes :)，應該選擇爲正確答案。謝謝，爲我節省了很多時間。 – Sammy