0

如何在页面中添加字体。

例如，假设我有一个特定的.TTF文件。

我想在特定网页上使用这个文件。现在，随着所有浏览器处理不同字体的方式不同，CSS 中可以在font-family标签中添加“字体文件”。

如果这是无法解决或难以置信的简单，我很抱歉，我是 CSS 的新手。

4

5 回答 5

5

创建字体文件夹并保存所有字体文件

    @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

于 2012-12-11T13:03:40.353 回答
3

这个页面应该可以帮助你。

你声明你的新字体：

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

然后引用它

h1 {
  font-family: Delicious;
}
于 2012-12-11T13:01:57.053 回答
3

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

你会得到一个包含字体的 zip，一个带有一些字体修饰的 CSS 文件。那应该让你开始。

于 2012-12-11T13:03:27.970 回答
2

使用@font-face

@font-face {
    font-family:font-name;
    src: url(path-to-font/font-name);
}
于 2012-12-11T13:02:19.160 回答
2

试试这个：

@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;
}
于 2012-12-11T13:03:47.257 回答