给网站换个好看的字体，引入阿里妈妈方圆体报错解决方法

Comming

9小时前发布

510

报错信息：

Failed to decode downloaded font:

./fonts/AlimamaFangYuanTiVF-Thin.woff2

OTS parsing error: Unable to instantiate font face from font data.

正确配置 CSS @font-face

/* 正确的字体声明示例 */
@font-face {
  font-family: 'AlimamaFangYuanTiVF';
  src: url('./fonts/AlimamaFangYuanTiVF-Thin.woff2') format('woff2'),
       url('./fonts/AlimamaFangYuanTiVF-Thin.woff') format('woff'),
       url('./fonts/AlimamaFangYuanTiVF-Thin.ttf') format('truetype');
  font-weight: 100; /* Thin对应的字重 */
  font-style: normal;
  font-display: swap; /* 提升加载体验 */
}

/* 使用字体 */
body {
  font-family: 'AlimamaFangYuanTiVF', sans-serif;
}

如果引用无效果，出现报错可尝试以下操作：

90% 的此类错误是字体文件损坏或格式不标准，其次是 MIME 类型配置错误。

确保服务器正确返回字体文件的 MIME 类型，不同服务器配置方式：

Nginx 配置（添加到 nginx.conf 或站点配置）：

http {
    types {
        # 字体MIME类型
        font/woff woff;
        font/woff2 woff2;
        font/truetype ttf;
        font/opentype otf;
        application/font-woff woff;
        application/font-woff2 woff2;
    }
    # 跨域配置（如果需要）
    add_header Access-Control-Allow-Origin *;
}

Apache 配置（.htaccess 文件）：

# 字体MIME类型
AddType font/woff .woff
AddType font/woff2 .woff2
AddType font/truetype .ttf
AddType font/opentype .otf

# 跨域配置
<FilesMatch "\.(woff|woff2|ttf|otf)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

评分

欢迎为Ta评分