Question

我目前正在使用相同的代码库在许多网站上设置并行加载，并且我遇到了未在样式中加载字体的问题。

以下是设置方式：

htaccess的：

# Images / Styles / Scripts rewrites
RewriteCond %{HTTP_HOST} ^(images\.)?([^.]+) [OR]
RewriteCond %{HTTP_HOST} ^(styles\.)?([^.]+) [OR]
RewriteCond %{HTTP_HOST} ^(scripts\.)?([^.]+)
RewriteRule .* - [E=DOMAIN_SEGMENT:%2]

头脑中

<link type="text/css" rel="stylesheet" href="http://styles.test.com/font-awesome/css/font-awesome.min.css">

其中test.com被当前网站的实际域替换。

在样式表中

@font-face {
    font-family:'Aller';
    src: url('/fonts/aller_rg-webfont.eot');
    src: url('/fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/aller_rg-webfont.woff') format('woff'),
         url('/fonts/aller_rg-webfont.ttf') format('truetype'),
         url('/fonts/aller_rg-webfont.svg#Aller') format('svg');
    font-weight: normal;font-style: normal;
}

许多网站使用相同的代码库，因此无法为CSS中的字体硬设置域。在并行更改之前，所有字体都正常加载。

正确加载样式表的其余部分。

谢谢

Answer 1

我发现了这个问题，该字体试图从styles.test.com/fonts/aller_rg-webfont.eot加载，因此无法加载。

解决方案是在我的.htaccess文件中使用它

<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Answer 2

应用此

@font-face {
    font-family:'Aller';
    src: url('fonts/aller_rg-webfont.eot');
    src: url('fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/aller_rg-webfont.woff') format('woff'),
         url('fonts/aller_rg-webfont.ttf') format('truetype'),
         url('fonts/aller_rg-webfont.svg#Aller') format('svg');
    font-weight: normal;font-style: normal;
}

字体未加载并行加载样式

2 个答案: