Question

我正在尝试使用CSS为我们的网站添加自定义字体：

body {
   background: #999999 url("../images/pattern29.png");
   color: #ffffff;
   font: 14px/25px Verdana, Verdana, sans-serif;
}

但每当我更改字体时，它都不起作用。我做错了什么？

Answer 1

尝试使用@font-face属性添加自定义字体

@font-face
{
    font-family:"YourFontName";
    src:url("yourfont.ttf"),
        url("yourfont.eot"); 
    /*etc etc*/     
    font-weight:normal;
    font-style:normal;
}

然后，您可以使用html

上的font-family属性来使用此字体

body
{
    font-family:"YourFontName",Verdana/*etc*/;
}

Answer 2

如果您需要自定义字体，请尝试使用网页字体.CSS3具有@ font-face，可以将字体加载到您的网页，关于@ font-face的一篇有用且有趣的文章，由Paul Irish撰写：Bulletproof @font-face Syntax。

@ font-face示例：

@font-face{
        font-family:MyFont;
        src:url(../font/MyFont.eot);
        src:local('?'),
            url(../font/MyFont.woff) format("woff"),
            url(../font/MyFont.otf) format("opentype"),
            url(../font/MyFont.ttf) format("Truetype"),
            url(../font/MyFont.svg#myfont) format("svg");
        }
body{
     font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}

Answer 3

您需要首先使用@ font-face嵌入字体，然后您可以使用font-family在css中使用它： http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Answer 4

你应该看看FontSquirrel。他们有一个@ font-face生成器，可以为你设置格式，因为我们可以编写你需要的CSS来包含页面中的字体。

您还可以查看Google的网络字体API。同样的交易，通过允许您添加标签，它们使它更容易一些。

如何通过CSS将字体应用于网站

4 个答案: