解决在CSS中使用@font-face指定Web字体时，链接远程字体文件失败

Henrik.

于 2022-04-22 10:10:28 发布

阅读量732

点赞数 2

文章标签： react.js 前端

本文链接：https://blog.csdn.net/weixin_45400833/article/details/124338545

版权

【遇到的问题】
尝试在CSS中使用@font-face指定Web字体，发现当链接的字体文件在本地时，字体效果不显示显示，前端请求字体，基于ttf文件存放于公司服务器上，直接请求会造成端口协议域名不同，所以采用 nginx 反向代理cdn 中转派发地址。

const downLoadAudiHmtlEnglishOld = useCallback(() => {

    if (!html) return;
    const stringFormatHtml = `<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style>
    @font-face {font-family: 'AudiTypeDisplayHigh';
    src: url('https://open.jidouauto.com/fonts/AudiTypeDisplayHigh-Normal.ttf');}  
    body{font-family: 'AudiTypeDisplayHigh'}
    </style>

    </head>
    <body id="body">${html}</body></html>

解决方案使用 nginx 反向代理cdn 解决跨域

location ~* \.(gif|jpg|jpeg|png|bmp|swf)$ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}

Henrik.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决在CSS中使用@font-face指定Web字体时，链接远程字体文件失败

【遇到的问题】尝试在CSS中使用@font-face指定Web字体，发现当链接的字体文件在本地时，字体效果不显示显示，前端请求字体，基于ttf文件存放于公司服务器上，直接请求会造成端口协议域名不同，所以采用 nginx 反向代理cdn 中转派发地址。const downLoadAudiHmtlEnglishOld = useCallback(() => { if (!html) return; const stringFormatHtml = `<!DOCT...
复制链接

扫一扫