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

如果您拥有自己的.ttf文件，则可以访问为您制作网络字体的网站（例如font-squirrel：http://www.fontsquirrel.com/fontface/generator）。

你会得到一个带有字体的zip，一个带有一些font-face declerations的CSS文件。这应该让你开始。

Answer 4

使用@font-face

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

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

如何将字体添加到网页

5 个答案: