个人中心
gpt4 book ai didi

css - @font 在任何浏览器中都不起作用，一切看起来都正确

转载 作者：太空宇宙 更新时间：2023-11-03 18:15:45 24 4
gpt4 key购买 nike

我已经阅读了本网站以及 www 上其他任何地方的所有相关答案，但我仍然无法让我的字体显示出来。路径正确，文件位于正确的位置，字体松鼠示例有效...

这是在我的 PC 上，其他一切正常(路径、图像、链接...)，根据我阅读和看到的所有内容，它应该可以正常工作，这是我在 CSS 文件中的代码:

    body {
    background: url('mcontentback.jpg') repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    margin:0;
    padding:0;
    border:0;
    width:100%;
    height:100%;
    min-width:497px;
    text-align:center;
    }
@font-face {
    font-family: 'bahamasregular';
    src: url('../fonts/bahamas-webfont.eot');
    src: url('../fonts/bahamas-webfont.eot?#iefix') format('embedded-opentype'),
          url('../fonts/bahamas-webfont.woff') format('woff'),
          url('../fonts/bahamas-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-size:100%;
    }
@font-face {
    font-family: 'bahamaslightregular';
    src: url('../fonts/bahamaslight-webfont.eot');
    src: url('../fonts/bahamaslight-webfont.eot?#iefix') format('embedded-opentype'),
          url('../fonts/bahamaslight-webfont.woff') format('woff'),
          url('../fonts/bahamaslight-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-size:100%;
    }
a {
    color:#369;
    }
a:hover {
    color:#000;
    background:#369;
    text-decoration:underline;
    }
h1, h2, h3 {
    color:#000;
    margin:.8em 0 .2em 0;
    padding:0;
    font-family: bahamasregular;
    }
p {
    color:#000;
    margin:.4em 0 .8em 0;
    padding:0;
    font-family: bahamaslightregular;
    }
.colmask {
    position:relative;
    clear:both;
    float:left;
    width:100%;
    overflow:hidden;
    }
.col1 {
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
    }
.fullpage {
    min-height:1200px;
    }
.fullpage .col1 {
    width:96%;
    left:2%;
    }
img {
    max-width:100%;
    }

这是我的 HTML5:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>

    <title>Blaa blaa</title><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8">
    <meta name="description" content="Blaa blaa">
    <meta name="keywords" content="Blaa blaa">
    <meta name="robots" content="index, follow">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../resourses/css/mcontent.css" media="screen"></head>

<body onload="parent.resizeIframe(document.body.scrollHeight)">
    <div class="colmask fullpage">
        <div class="col1">
        <h1>Blaa blaa!</h1>
        <p>Blaa blaa foo blah bla.</p>
        <p>Blaa blaa foo blah bla!</p>
    </div>
</div>
</body>
</html>

我究竟做错了什么？在 Windows7 上的 IE 11、Firefox 28 和 Comodo Dragon(Comodo 开发)中测试。

最佳答案

您的 CSS 代码中有太多括号，导致字体系列未应用于您网页的任何元素或部分。而且，字体系列周围的引号丢失了。

我认为你应该更正这部分

h1, h2, h3 {
    color:#000;
    margin:.8em 0 .2em 0;
    padding:0;
    }
    {
    font-family: bahamasregular;
    }

为此

h1, h2, h3 {
    color:#000;
    margin:.8em 0 .2em 0;
    padding:0;
    font-family: 'bahamasregular';
}

p 元素的 CSS 代码中存在同样的错误

同时检查 this clear tutorial on @font-face获取更多信息。此外，正如 Jukka 指出的那样，使用浏览器的开发人员工具检查字体文件是否正在加载。

关于css - @font 在任何浏览器中都不起作用，一切看起来都正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22872336/

24 4 0
文章推荐： javascript - 为什么这个 POST 请求不会向服务器发送 JSON 字符串？
文章推荐： python - 如何堆叠多个 Astropy 表
文章推荐： ruby-on-rails - 关系和setter方法
文章推荐： ruby-on-rails - 如何以当前用户或非用户身份更新资源？
太空宇宙
个人简介

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

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