只为一种语言加载字体。

Question

，我在下面的答案中解决了这个问题

我有一个2种语言的网站。

德文版本:网站/index.html

英文版:网站/ English /index.html

该网站在本地加载谷歌字体。字体文件位置:网站/资产/字体

这适用于德文版本，但不适用于英文版本。

德国主要CSS文件:网站/资产/mbr/mbr-addtional.css

英文主CSS文件:网站/英语/资产/mbr/mbr-addtional.css

网站/index.html加载此样式表：

<link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">

网站/english/index.html也加载：

  <link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">

我从tangerine.css文件中导入字体面板设置。字体与tangerine.css文件位于同一个文件夹中。

我使用以下行导入tangerine.css文件：

@import url(https://websitename/assets/fonts/tangerine.css);

在tangerine.css文件中，我有以下代码(仅是一个浏览器的一个示例)：

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/tangerine-v17-latin-regular.eot'); /* IE9 Compat Modes */

每当我尝试为tangerine.css添加相同的代码时，整个网站都会将字体更改为默认字体，并忽略所有其他内容。

我尝试重命名字体文件，甚至复制英文目录中的整个字体文件夹，并更改@import代码，但它不起作用。

我也尝试了url('../../fonts/tangerine-v17-latin-regular.eot');的字体，所以英语mbr-addtional.css使用与德语文件相同的文件。

编辑1：devtools错误显示CORS错误，不允许加载字体。

这是htaccess文件：

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

<IfModule mod_rewrite.c>
    RewriteEngine on
</IfModule>

# Require all granted
Satisfy Any
Order Deny,Allow
Allow from all

<FilesMatch "^\.">
    # Require all denied
    Order Allow,Deny
    Deny from all
</FilesMatch>

我添加了<FilesMatch "\.(eot|otf|ttc|ttf|woff|woff2)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch>，但它仍然拒绝请求。

编辑2: --我将其添加到htaccess中：

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg+xml                    .svg
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff
AddType application/font-woff2           .woff2

编辑3:

mbr-附加.mbr：

@import url(websitename/assets/fonts/roboto.css);
@import url(websitename/assets/fonts/roboto-condensed.css);
@import url(websitename/assets/fonts/tangerine.css);
@import url(websitename/assets/fonts/titillium.css);


body {
  font-style: normal;
  line-height: 1.5;
}
*and more css*

roboto字体文件(命名为roboto.css，位于https://websitename/assets/fonts/中)：

/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}

Index.html(主页)使用：<link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">调用mbr-addtional.css

Answer 1

您的服务器显示Referrer Policy: strict-origin-when-cross-origin。(了解更多)

标头不包含预期的access-control-allow-origin: *头。响应头还包含信息Server: Apache。

在这个职位中，我找到了一个有用的网站来获得正确的CORS配置。下面是Apache页面：apache.html，它说：

要使用Apache将CORS授权添加到头部，只需在服务器配置的<Directory>、<Location>、<Files>或<VirtualHost>部分(通常位于*.conf文件(如httpd.conf或apache.conf)中)或在.htaccess文件中添加以下行： 报头设置访问-控制-允许-原产地"*“

您甚至可以跳过<IfModule mod_headers.c>检查。

Answer 2

我在带有头设置的htaccess上所做的每一个编辑都没有被接受。

我通过添加

Access-Control-Allow-Origin: example1.com

到Plesk Apache设置。

这篇文章如何为Linux在Plesk中设置CORS -跨源资源共享？是在正确的轨道上，但代码不适用于我。

一个用户也有同样的问题，这就是解决这个问题的原因，下面是他们的答案：

在Plesk Obsidian中，我们已经能够启用>Apache和nginx的CORS (只要启用了代理模式，而不是为nginx单独启用代理模式)，方法是在>Common设置部分设置额外的标头，使用以下格式：Access-Control-Allow-Origin: example1.com。

谢谢大家的大力帮助！