CSS中的字體/跨瀏覽器兼容性？

我最近開始學習HTML/CSS，並開始對字體和跨瀏覽器兼容性感到非常沮喪。我正在使用自定義字體（Klavika）與我的個人網站並將其上傳到服務器，但我無法弄清楚如何在瀏覽器中使其兼容。該網站在這裏：http://www.tommaxwell.me，你可能會看到，它顯示的字體真的很難看。有人可以看我的代碼，並讓我在正確的方向嗎？CSS中的字體/跨瀏覽器兼容性？

CSS：

body { 
background-image: url(209241_2453996366505_1946848896_o.jpg); 
background-size:cover; 
} 

@font-face { 
font-family: klavika-medium; 
src: url(Klavika-Medium.otf); 
} 


h1 { 
text-align: center; 
margin-top: 10%; 
font-family: klavika-medium; 
color:#FFFFFF; 
font-size: 6.250em; 
} 


p { 
position: relative; 
top:-8%; 
text-align: center; 
font-family: klavika-regular; 
color:#FFFFFF; 
font-size: 1.875em; 

} 

ul { 
position: relative; 
text-align: center; 
list-style-type: none; 
margin-top: 5%; 
left:36.5%; 
font-family: klavika-medium; 
} 


ul li { 
font-size: 40px; 
} 


ul li a { 
text-decoration: none; 
color: #FFFFFF; 
opacity: 0.8; 
float:left; 
padding-right:3%; 

} 


ul li a:hover { 
opacity: 1.0; 
}

來源

2012-10-04 Tom Maxwell

不知道這...但也許它不能找到其中的字體在目錄？你只是說「src：url（Klavika-Medium.otf）;」但取決於它所在的位置，請嘗試製作相對路徑。 – 2012-10-04 02:47:24

你需要你的字體爲不同的瀏覽器不同的格式。您可以嘗試http://www.fontsquirrel.com/fontface/generator

在該網站中，他們會將所有適當格式的字體轉換爲您。他們也會給你一個樣式表樣本，這樣你就可以複製已經準備好使用跨瀏覽器的CSS。另一個額外的好處是像圖像和音頻字體可以被壓縮。他們的工具也可以做到這一點給你一個更小的字體。

順便說一下，聲明字體的時候，你也可以聲明與該權重相關的字體權重。字體重量：100可能是你的常規字體，而font-weight：600可能是你的中等字體。這使得使用字體變得更加容易，因爲只需要記住一個名字，並且只要使用適當的重量即可，無論使用什麼字體。

來源

2012-10-04 02:52:41

問題解決了！ –

如果您希望正確使用不同的字體權重，則由FontSquirrel生成的CSS代碼需要一點編輯。 FontSquirrel的CSS代碼將每種字體轉換爲獨立的字體系列，並具有正常的重量和正常的風格！此外，字體重量100是最小的重量（排版中的「超輕」），而不是常規（正常）。 –

嗨，你需要給它以其他格式也工作在每個瀏覽器。

您可以嘗試在線轉換器。

http://www.fontsquirrel.com/fontface/generator

http://www.font2web.com/

例：

@font-face { 
font-family: 'Conv_iskpota'; 
src: url('fonts/iskpota.eot'); 
src: local('☺'), url('fonts/iskpota.woff') format('woff'), url('fonts/iskpota.ttf') format('truetype'), url('fonts/iskpota.svg') format('svg'); 
font-weight: normal; 
font-style: normal;}

來源

2012-10-04 02:56:59

CSS中的字體/跨瀏覽器兼容性？

回答

相關問題