如何將字體添加到網頁

Question

如何向頁面添加字體。

例如讓我說我有一個特定的.TTF文件。

我想在特定的網頁上使用此文件。現在所有的瀏覽器都以不同的方式處理不同的字體，可以在CSS中添加font-family標籤中的「字體文件」。

對不起，如果這是無法解決或難以置信的簡單我是CSS的新手。

Answer 1

創建字體文件夾並保存所有字體文件

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

.menu { 
    font-family: Archer-Semibold; 
} 

url('fonts/archer-semibold-pro.eot')被用於使用了IE 9和url('fonts/archer-semibold-pro.eot?#iefix') IE 6至8

Answer 2

This page應該可以幫到你。

您與您的申報新字體：

@font-face { 
    font-family: Delicious; 
    src: url('Delicious-Roman.otf'); 
} 

然後用

h1 { 
    font-family: Delicious; 
} 

Answer 3

使用@font-face

@font-face { 
    font-family:font-name; 
    src: url(path-to-font/font-name); 
} 

Answer 4

引用它。如果你有一個.ttf -file，你自己，你可以去一個網站，爲你製作網頁字體（例如字體松鼠： http://www.fontsquirrel.com/fontface/generator）。

您將得到一個帶有字體的zip文件，這是一個帶有一些字體表面降級的CSS文件。這應該讓你開始。

Answer 5

嘗試這種情況：

@charset "utf-8";  //file encoding 

@font-face { 
font-family: 'GoodDogRegular'; 
src: local("GoodDog Regular"); 
url('fonts/gooddog-webfont.ttf') format('truetype'), 
font-weight: normal; 
font-style: normal; 
} 

現在，您可以在CSS中使用該字體，就像常規字體一樣。

.menu { 
font-family:GoodDogRegular; 
color:#dd0000; 
font-size: 36px; 
font-weight:bold; 
}