账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    font-face在chrome里是方格显示
    • 2019-06-25 00:00
    • 10
    43
    0

    这是我在使用emby时遇到的,firefox图标正常
    我看了它的css,也没问题啊,字体文件也存在,也没有相关报错
    所以问题可能出在哪里?

    @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: local('Material Icons'),local('MaterialIcons-Regular'),url(flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'),url(flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff) format('woff')
    }
    
    .md-icon {
        font-family: 'Material Icons';
        font-weight: 400;
        font-style: normal;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -webkit-font-feature-settings: "liga" 1;
        -moz-font-feature-settings: "liga" 1;
        font-feature-settings: "liga" 1;
        line-height: 1;
        overflow: hidden;
        vertical-align: middle
    }

    找到问题了,是local的问题,firefox和chrome都没有字体的下载请求,删除local后正常
    但问题又来了,local是从哪里获取的?我并没有在系统里找到同名的,而且既然chrome找到了local字体为什么没有正常显示?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 習慣了孤單 普通会员 1楼

      @font-face在Chrome中显示为方格,通常是由于以下几种原因:

      1. 字体文件路径错误:请确保你定义的字体文件路径是正确且可访问的。如果是相对路径,请检查相对于CSS文件的位置是否准确。

      css @font-face { font-family: 'MyFont'; src: url('fonts/myfont.ttf') format('truetype'); }

      1. 字体格式不支持:Chrome浏览器支持.ttf, .otf, .woff, .woff2等格式的字体,如果使用的是一种不支持的格式,可能会导致无法正常显示。建议提供多种格式以兼容不同浏览器。

      css @font-face { font-family: 'MyFont'; src: url('fonts/myfont.ttf') format('truetype'), url('fonts/myfont.woff2') format('woff2'), url('fonts/myfont.woff') format('woff'); }

      1. 字体版权或跨域问题:部分自定义字体可能存在版权保护或者跨域限制,这也会造成字体无法加载,从而显示为方框。对于跨域问题,可以尝试在服务器端设置允许跨域(CORS),或者使用data URI scheme将字体文件嵌入到CSS中。

      2. 浏览器缓存:请尝试清除浏览器缓存,或者强制刷新页面(Ctrl + F5)查看是否因缓存问题导致新字体未生效。

      以上是一些常见的解决办法,具体还需根据实际情况排查。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部