【问题标题】:@font-face won't load when visiting the site for the first time, must refresh/reload@font-face 第一次访问网站时不会加载,必须刷新/重新加载
【发布时间】:2012-08-09 09:43:39
【问题描述】:

我已经使用http://www.fontsquirrel.com/fontface/generator 套件生成器和 css 代码正确配置了 CSS 文件,并将字体文件上传到了正确的目录中。

第一次输入刷新后字体在我的网站上工作得非常好,即使在页面之间切换也是如此火狐和铬。

我的 CSS 文件顶部的 css 代码:

@charset "utf-8";
body { margin:0; padding:0; width:100%; background:url(images/bg.png) repeat; }
html { padding:0; margin:0; }
a { text-decoration:none; border: none; outline:none; }
a:hover { text-decoration:underline; }
a img {border: none; }

@font-face{ font-family: 'handfont-webfont'; src: url('text/handfont-webfont.eot'); src: url('text/handfont-webfont.eot?#iefix') format('embedded-opentype'), url('text/handfont-webfont.woff') format('woff'), url('text/handfont-webfont.ttf') format('truetype'), url('text/handfont-webfont.svg#webfont') format('svg'); }

这是用于我页面中段落的字体代码:

.body p { font-family:handfont-webfont; font-size: 12px; padding:5px 5px; margin:0; }

我试图寻找答案但找不到答案,非常感谢任何帮助。

【问题讨论】:

    标签: html css fonts refresh font-face


    【解决方案1】:

    您是否尝试过将 @font-face 放在 CSS 中的任何其他内容之前。

    您的 CSS 中有错误:

    .body p { font-family:handfont-webfont;}//there are no single quotes
    

    改成:

    .body p { font-family:'handfont-webfont';}//with single quotes
    

    【讨论】:

    • 就是这样,非常感谢!希望我能投票赞成你的答案,但显然我需要 15 个声誉才能做到这一点(我是新来的)。我认为单引号对于使用最新版本格式化 CSS 并不重要,即我读到我不需要在 url 位置周围使用单引号。如果您不介意我问的话,是否还有其他类似的内容对字体系列等引号非常敏感?
    • 谢谢。对于您的问题,这将是您唯一需要注意的引号。
    【解决方案2】:

    尝试改变-

     font-family:'handfont-webfont' 
    

    font:'handfont-webfont'
    

    在.body p中

    【讨论】:

    • 字体需要 3 个参数:font-family + line-height + font-weight 才能工作
    猜你喜欢
    • 1970-01-01
    • 2012-06-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-19
    • 2012-11-01
    • 2011-03-24
    • 2013-08-13
    相关资源
    最近更新 更多