0

好吧，我是 CSS 新手，所以我们开始吧。在我使用的模板中，有一个样式表

头{字体系列：Verdana；字体大小：16px；颜色：#000000;}
正文 {字体系列：Verdana; 字体大小：12px；颜色：#ffffff}
一个 {颜色：#ff0000; 字体系列：Verdana；字体大小：30px;}
bluetext {color:#0000ff;}
工具提示{font-family:Verdana; 字体大小：11px；颜色：#ffffff;}

所以我认为它正在确定每个部分的字体应该是什么。如果我想为所有这些部分使用自定义字体而不是 Verdana，我该怎么办？我有 .ttf 文件，但我不知道还能做什么。

提前致谢！

4

4 回答 4

7

首先woff为 Mozilla、eotIE 等所有浏览器生成字体。因此，您可以从 http://www.fontsquirrel.com/fontface/generator和 http://www.font2web.com/生成字体。然后写@font-face在你的 CSS 中。

@font-face {
  font-family: 'font';
  src: url('font.eot?') format('eot'), url('font.woff') format('woff'), url('font.ttf') format('truetype');
}
body{
  font-family: 'font';
  color:#fff;
font-size:12px;
}
.head {font-size:16px; color:#000000;}
a {color:#ff0000; font-size:30px;}
.bluetext {color:#0000ff;}
.tooltip{font-size:11px;}
于 2012-04-24T08:44:12.673 回答
2

您需要为此使用字体。基本实现是：

@font-face {
    font-family: CustomFontName;
    src: url(http://path-to/customfont.ttf);
    font-weight:400;
}

然后就像在任何其他样式规则中的任何其他字体一样使用它。

p {
    font-family: CustomFontName, Helvetica, Arial, sans-serif;
}
于 2012-04-24T08:42:23.673 回答
0

Just first install this font on your server/system/root.

& then apply like this in your css 

@font-face {
        font-family: 'myriadproregular'(i.e.custom font name);
        src: local('myriadproregular'), url('myriadproregular.ttf') format("truetype");
    }
    and  if you want more than one font you can do the same
    @font-face {
        font-family: 'myriadprocond';
        src: local('myriadprocond'), url('myriadprocond.ttf') format("truetype");
    }
    @font-face {
        font-family: 'myriadprosemibold';
        src: local('myriadprosemibold'), url('myriadprosemibold.ttf') format("truetype");
    }

just use the font name where ever you want to use such as 

p
{
font-family:"custom font name"

}
于 2012-04-24T08:45:25.447 回答
0

您必须在您的 css 文件中使用它：

@font-face {
    font-family: your_font;
    src: url('your_font.ttf');
}

为了在 IE 上工作，您应该使用 .eot 扩展名导出另一个版本的字体，并添加另一个 src 属性。

编辑：这是一个关于使用 @font-face 的有用链接：http ://www.webistrate.com/css3-custom-fonts-using-font-face/

于 2012-04-24T08:40:10.727 回答