使用@ font-face和fontsquirrel的字體

我想創建我的第一個網站，並且正在試驗來自fontsquirrel的字體。使用@ font-face和fontsquirrel的字體

唯一的問題是我只能使用我通過網站下載的一些字體。

我在編寫css代碼時遇到了很多問題，特別是當字體家族包含了更多的一種風格時。

讓我們例如LM單10常規和特種精英例如：

我對特種精英代碼如下，它的偉大工程：

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

AND 

.fifth {font-family: 'specialelite'; font-weight: normal; font-size: 16px; color:black;}

但..當我試圖爲適應對LM單10家族的任何風格的這種格式，它根本不起作用....

http://www.fontsquirrel.com/fonts/Latin-Modern-Mono

我想現在已經兩天幾個小時了，我正處於一場緊急危機的邊緣......我不知道這個錯誤是指我指的是字體家族，還是我寫的url錯誤... PLEASE ，我真的很難相信你，你能在回覆中提供一個代碼示例嗎？

比方說，「拉丁現代單晶硅燈10王家軍」 ..

我只是不明白這一點..

謝謝你在前進，

亞歷山德羅。

來源

2016-02-27 Alexandros

您發佈的代碼是有效的，但是我不知道您是否已經將字體文件實際上覆制到了與CSS相同的位置，否則它將不會看到它 –

是的，這些文件位於相同的位置..我仍然試圖找到一種方式讓LMMono出現......我無法得到它。 – Alexandros

我試着@ font-face {font-family：font-family：'LMMono10LightRegular'; src：url（'LMMono10LightRegular.otf'）; （'LMMono10LightRegular.woff'）， url（'LMMono10LightRegular.woff'）格式（'嵌入式開放式'）， ''woff'）， url（'LMMono10LightRegular.ttf'）格式（'truetype'）， url（'LMMono10LightRegular。svg＃LMMono10LightRegular'）format（'svg'）; font-weight：regular; font-style：light; } – Alexandros

我只是設法讓您的字體工作看看我的代碼，我把所有的文件在HTML的根稱爲

<!doctype html> 
 

 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 

 
    <title>Font Test</title> 
 

 

 
    <style> 
 
    @font-face{ 
 
\t font-family: 'MyWebFont'; 
 
\t src: url('lmmono10-regular-webfont.eot'); 
 
\t src: url('lmmono10-regular-webfont.eot?iefix') format('eot'), 
 
\t  url('lmmono10-regular-webfont.woff') format('woff'), 
 
\t  url('lmmono10-regular-webfont.ttf') format('truetype'), 
 
\t  url('lmmono10-regular-webfont.svg#webfont') format('svg'); 
 
\t } 
 

 
\t p { font-family: 'MyWebFont'; } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 
<p>My Test</p> 
 
</body> 
 
</html>

我希望這可以幫助你

來源

2016-02-29 20:20:05

這是有幫助的，我已經瞭解到，如何命名您的字體系列並不重要，但是..它仍然不起作用。它的瘋狂。 – Alexandros

也許我使用bootstrap的事實是影響一些字體？ – Alexandros

現在不好調查 –

使用@ font-face和fontsquirrel的字體

回答

相關問題