css字體家族沒有出現？

我遇到了font-family的問題;基本上我正在做所有正確的事情（我希望），但出於某種原因，字體正在做一些奇怪的事情。因此，讓我解釋一下這個問題。css字體家族沒有出現？

在我的瀏覽器中，字體在chrome/IE中顯示OK，但它並未出現在mozilla中。在我父親的筆記本電腦上，字體在任何瀏覽器中都不會出現。在我的隊友蘋果mac上，字體出現在Safari中，但不在Chrome中。在iPhone上顯示字體。在Nexus 4上，字體未顯示（在Chrome或Mozilla中）

這就是爲什麼我很困惑;爲什麼它出現在不同平臺上的某些瀏覽器中，而不是其他平臺上？字體可以專用於操作系統？

這是我使用的CSS。

@font-face { 
font-family: "Pixelated"; 
src: url('templates/joostrap/fonts/pixelated.ttf'); 
}

這就是我應用它的方式。

{font-family: "Pixelated"; text-transform: uppercase;}

任何幫助，將不勝感激！乾杯！

來源

2013-09-01 Andrew Matthew

可能重複[safari和ie不能讀取ttf eot字體]（http://stackoverflow.com/questions/14889045/safari-and-ie-cant-read-ttf-eot - 字體） – cubrr

TTF當在Chrome和Firefox中使用時，字體的使用方式必須不同。正確地檢查此鏈接來設置TTF：

ttf files not rendering on Chrome and Firefox

來源

2013-09-01 09:23:10 user2339071

啊，現在就試試這個，回到你身邊，我也重新命名了字體，並且通過那個帖子的外觀，你不允許它，否則它不會正確渲染。乾杯! –

的問題是，你只使用一個.TTF文件。並非每個瀏覽器都能夠加載它。相反，您應該使用生成器（link），以便您擁有.eot和.woff文件。

你的字體CSS看起來就像這樣：

@font-face { 
    font-family: 'Pixelated'; 
    src: url('../fonts/pixelated.eot'); 
    src: url('../fonts/pixelated.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/pixelated.woff') format('woff'), 
     url('../fonts/pixelated.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
}

希望這有助於。

來源

2013-09-01 09:26:57 Jrn

嗯，我的字體顯然是'腐敗'，所以我無法使用發生器..總是得心應手！ –

指定一個名爲「myFirstFont」字型，並指定可以發現

@font-face 
{ 
font-family: myFirstFont; 
src: url('Sansation_Light.ttf'), 
    url('Sansation_Light.eot'); /* IE9 */ 
}

地方包括您的服務器上的字體文件的URL，並參考其與CSS

src: url('Sansation_Light.ttf')

如果字體文件位於不同的域，請使用完整的URL代替

src: url('http://www.w3schools.com/css3/Sansation_Light.ttf')

我認爲此鏈接可幫助您http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

來源

2013-09-01 09:30:06

未顯示字體的最常見問題是路徑未正確指定。當你有多種文件字體時，會發生這種情況，例如：light，bold，medium。因此，也許你的路徑是

src: url('templates/joostrap/fonts/pixelated.ttf');

但如果多個版本都在一個目錄下，它可能是

src: url('templates/joostrap/fonts/pixelated/pixelated.ttf');

這發生在我身上了。在我的情況下，我有字體。css在我的CSS目錄中，然後我有資產和字體的變體在同一目錄中的字體。在我的情況下，我不得不實施橫跨道路字體。所以根據我的目錄結構我做了

@font-face { 
    font-family: 'across_the_roadregular'; 
    src: url('../assets/fonts/across_the_road/across_the_road-webfont.eot'); 
    src: url('../assets/fonts/across_the_road/across_the_road-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../assets/fonts/across_the_road/across_the_road-webfont.woff2') format('woff2'), 
     url('../assets/fonts/across_the_road/across_the_road-webfont.woff') format('woff'), 
     url('../assets/fonts/across_the_road/across_the_road-webfont.ttf') format('truetype'), 
     url('../assets/fonts/across_the_road/across_the_road-webfont.svg#across_the_roadregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

請注意，我指定了各種文件類型。這是因爲並非所有瀏覽器都能顯示.ttf格式。你可以看到兼容性在http://caniuse.com/#feat=ttf

來源

2015-11-09 20:57:22 JGallardo

css字體家族沒有出現？

回答

相關問題