Question

无法让我安装的字体与我的CSS一起使用。我绝对尝试过一切。我觉得这可能是我的文件结构。但我知道这是我的字体在我的电脑上的位置。任何想法？

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="../css/main.css">
    </head>
    <body>
        <div class="header">
            <ul class="navigation">
                <li><a href="about.html">About</a></li>
                <li><a href="webdesign.html">Web Design</a></li>
                <li><a href="photography.html">Photography</a></li>
                <li><a href="contact.html">Contact</a></li>
        </div>
        <div class="content">
        </div>
    </body>
</html>

CSS：

@font-face {
    font-family: jaapokki;
    src: src("/usr/share/fonts/truetype/custom/jaapokkisubtract-regular.ttf");
    font-weight: normal;
 }

/***********************************
Main Layout
***********************************/


body {
    margin: 0;
    background: #A4A4A6;
    font-family: jaapokki;
}

.header {
    height: 50px;
    background: #fff;
    border-bottom: solid 30px #7300B5;
    width: 100%;
    margin: 0px auto;
    padding-top: 50px;
    position: fixed;
    top: 0px;

}

 .content {
    width: 960px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    height: 2000px;
    margin: 70px auto; 
}

/***********************************
  Header Navigation
***********************************/

 .navigation li {
    list-style: none;
    display: inline;
    margin: 0px 20px;
    padding: 0;
    float: right;

 }

 .navigation li a {
     text-decoration: none;

 }

请帮助！

Answer 1

src属性实际上告诉浏览器在服务器上查找字体文件的位置。您必须将路径放在引号内，并在url()内放置

@font-face
{
font-family: "League Gothic";
src: url('../fonts/leagure_fonts.ttf');
}

路径就像你的HTML路径一样。 javascript文件，图像等...考虑你在一个名为_fonts的文件夹中名为_styles和名为League.ttf的字体文件中的样式表。这两个文件夹都在您网站的根目录中。

所以样式表路径为../_fonts/League.ttf.如果你想更清楚（或者在多个src属性的情况下），那么也试试这个

@font-face
    {
    font-family: "League Gothic";
    src: url('../fonts/league_fonts.ttf')format('truetype');
    }

如果您在兼容模式下使用IE 8或更低版本或IE 9，那么这可能会因为IE错误而对您有所帮助。需要附加?#iefix

@font-face
    {
    font-family: "League Gothic";
    src: url('../fonts/league_fonts.eot?#iefix')format('embedded-opentype')
    }

根据您的要求修改

麻烦@ font-face css规则

1 个答案: