如果字體不可用，則用圖像替換文本

我有一個使用非網頁安全字體（@ font-face ...）作爲標題的網頁。如果字體不可用，則用圖像替換文本

如果瀏覽器的瀏覽器不支持這種情況，這會顯得非常糟糕，那麼是否有辦法檢測到這種功能，並在圖像不支持的情況下用圖像替換文本？

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

h1 { 
    font-family: 'awesomefont'; /* Substitute with image if font not supported */ 
} 

p { 
    font-family: 'awesomefont', Arial, sans-serif; /* main body text can use alternative font */ 
}

來源

2011-11-01 Tom

我不確定是否有辦法做你在問什麼。但我通常使用cufon在我的網站上使用自定義字體。它使用畫布從文本中創建圖像。如果瀏覽器不支持javascript，它只是顯示的原始文本

http://cufon.shoqolate.com/generate/

來源

2011-11-01 15:04:45

一種選擇是使用測量字符串的寬度來檢測，如果該字體可用的JS庫之一。不幸的是，JS沒有可用的功能來直接執行你想要的功能。

這裏有一些實現其使用字符串測量技術：

來源

2011-11-01 15:29:31 jamiebikies

@font-face { 
    font-family: 'Nosifer Caps'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Nosifer Caps Regular'), local('NosiferCaps-Regular'), url('http://themes.googleusercontent.com/static/fonts/nosifercaps/v1/5Vh3eVJZ2pCbwAqfFmh1F3hCUOGz7vYGh680lGh-uXM.woff') format('woff'); 
} 

p { 
    font-family: 'Nosifer Caps', cursive; // is this not the point of defining a websafe font after your non-websafe-font???? 
}

或者你想一直說的字體爲你的頭。在這種情況下，我甚至不會經歷處理自定義字體的麻煩。只需創建您的圖像並在100％的時間內使用它。加載一個頭文件圖像的整個字體庫的開銷是愚蠢的。

來源

2011-11-01 15:41:37 rlemon

我在整個網站使用字體，所以加載開銷不是問題。對於網站的主體文本，我定義了一個網頁安全字體，但如果可能的話，頁面標題應該替換爲圖像而不是替代字體。 – Tom

好吧，我不得不問。你的標題有多大？如果你不介意我問你在用什麼字體？你有沒有比較只是使標題靜態圖像的重量？這可能不是那麼多。另外考慮一下，如果你擔心尺寸;這些解決方案中的任何一種都將最終爲頁面增加更多大小，並增加客戶端的處理能力。我將再次強調，如果您決定不使用網頁安全字體作爲備份，請堅持使用靜態圖像作爲您的＃1選項。 – rlemon

如果字體不可用，則用圖像替換文本

回答

相關問題