如何将字体添加到网页

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; 
}