使用@ font-face src：本地與fonts.com網絡字體

正如討論here，經濟實惠的fonts.com網絡字體計劃不允許通過@font-family直接嵌入字體，或者看起來好像......使用@ font-face src：本地與fonts.com網絡字體

我不知道是否這會工作：

@font-face { 
    font-family: 'Main'; 
    src: local('FoobarBk'), local('FoobarBk Regular'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Main'; 
    src: local('FoobarMd'), local('FoobarMd Regular'); 
    font-weight: bold; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Main'; 
    src: local('FoobarIt'), local('FoobarIt Regular'); 
    font-weight: normal; 
    font-style: italic; 
} 

@font-face { 
    font-family: 'Main'; 
    src: local('FoobarMdIt'), local('FoobarMdIt Regular'); 
    font-weight: normal; 
    font-style: normal; 
}

的想法是，一旦fonts.com提供的腳本已經完成加載FoobarBk，FoobarMd，FoobarIt和FoobarMdIt字體，他們將可爲本地字體（沒有額外的頁面加載）和任何CSS樣式指定Main作爲font-family我會不斷使用它們。

我懷疑這只是一廂情願的想法，但我寧願有人用某種方式來回答。

來源

2012-12-27 Steve Taylor

當涉及到使用local（）時，請注意缺少Android支持（默認瀏覽器）。如果使用local（），Android 2.2一直到4.0（看來）將無法加載字體。 http://caniuse.com/fontface – Patrick

根據我的經驗，這裏的「本地」一詞意味着用戶將字體安裝到他們的操作系統中，而不是它只是瀏覽器中的本地緩存文件。

對於您網站的新用戶，您希望能夠保證他們獲取您的字體，因此通常將「本地」字體指向不存在的引用，以便它們必須從Web服務器下載。這是爲了防止用戶使用與你的名字相同的名字，並且設計看起來很糟糕。

見smiley-face answer也SO

如果你在哪裏，你知道你可以信任客戶端的安裝字體的受控環境（即他們已經安裝了所有的Foobar變化），那麼您的方法是有效的。

來源

2012-12-27 16:20:16 Brad

謝謝，我想到了很多。我會推遲接受，直到有一個普遍的共識，否則，因爲坦率地說，我不能在這個小時進行測試。 –

是，+1;當編寫像src：local（'FoobarBk'），local（'FoobarBk Regular'）;'這意味着：如果在用戶PC上安裝字體'FoobarBk'，如果不嘗試找到'FoobarBk Regular '。但是如果第二個字體沒有安裝呢？您必須提供一個回退到可下載的字體文件。「'src'：遠程字體文件位置的URL或用戶計算機上字體的名稱，格式爲local（」字體名稱「）。」請參閱：https：//developer.mozilla.org/en-US/docs/CSS/@font-face#Values – feeela

本地（...）確實是指本地安裝的字體，請參閱http：// www。 w3.org/TR/css3-fonts/#src-desc –

使用@ font-face src：本地與fonts.com網絡字體

回答

相關問題