个人中心
gpt4 book ai didi

css - @font-face css 规则有问题

转载 作者：行者123 更新时间：2023-11-28 08:35:59 25 4
gpt4 key购买 nike

无法让我安装的字体与我的 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;

 }

请帮忙!

最佳答案

src 属性实际上告诉浏览器去哪里寻找服务器上的字体文件。您必须像这样将路径放在引号内和 url() 内

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

该路径就像您的 HTML 路径一样，例如。 javascript 文件、图像等...假设您在名为 _styles 的文件夹中有一个样式表，在名为 _fonts 的文件夹中有一个名为 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')
    }

根据您的要求修改

关于css - @font-face css 规则有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28036203/

25 4 0
文章推荐： ios - Xcode UI 测试按钮未点击
文章推荐： css - 重新部署 webapp 缩小后出现 404 错误(缓存)
文章推荐： html - 使用 CSS 和 Span/A 标签连接到图形图像作为按钮
文章推荐： javascript - 滚动主要内容 Div 时可滚动的侧边栏
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com