CSS 样式表和自定义字体答案

【问题标题】：CSS stylesheet and custom fontsCSS 样式表和自定义字体
【发布时间】：2012-04-24 16:45:25
【问题描述】：

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

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

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

提前致谢！

【问题讨论】：

How to use our custom font on our website的可能重复
您不必为每个类声明字体系列、颜色等。它们将从它们的父元素继承，因此仅对 body 元素和要覆盖的元素设置字体系列和颜色。此外，页面的head 部分仅包含页面标题、样式表等内容，但页面上没有任何实际可见的内容，因此对其进行样式设置没有任何作用。最后，您应该查看 css 中的类及其符号，bluetext 和 tooltip 类应该是 .bluetext 和 .tooltip。

标签： html css fonts web

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

p {
    font-family: CustomFontName, Helvetica, Arial, sans-serif;
}

【讨论】：

【解决方案3】：

你必须在你的 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/

【讨论】：

【解决方案4】：

只需先在您的服务器/系统/根目录上安装此字体。

& 然后像这样在你的 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");
    }

只要在你想使用的地方使用字体名称比如

p
{
font-family:"custom font name"

}

【讨论】：