无法访问@font-face 中提到的字体文件答案

【问题标题】：Unable to access the font files mentioned inside @font-face无法访问@font-face 中提到的字体文件
【发布时间】：2019-11-21 04:30:03
【问题描述】：

首先，我是 webpack 及其加载器的新手。我有一个应用程序，我正在其中生成一个 CSS 文件，该文件位于与请求发起的不同域中（更像是静态代码存储库）。问题是，服务器加载 style.css 文件，它具有字体的导入，这些字体也存储在同一个存储库中，并且可以通过以下方式访问：

@font-face {
    font-family: someFont;
    src: url(/0.0.1/fonts/f9c391f982c59a955bb0e1866fbbed4a.woff2) format("woff2"),url(/0.0.1/fonts/ac4b1e27ea3661e299554aaa429e97c5.woff) format("woff");
    font-weight: 300;
    font-style: normal;
    font-display:swap}

所以现在，假设这是在 styles.less 文件和域 https://example.com 上

当我知道 CORS 问题并在我的节点/Express 应用程序中添加 cors() 时，此 style.less 正在完美加载，例如

cont cors = require('cors');
app.use(cors());

现在的问题是，当 style.css 文件尝试加载其中的字体时，我开始收到 CORS 错误。当我检查标头时，所有其他进入该存储库的请求在响应标头中都有access-control-allow-origin: '*'，但字体请求中没有

这里是加载器和路径的 webpack 配置：

output: {
        path: path.resolve(__dirname, `dist/client/${pkg.version}`),
        publicPath: `/${pkg.version}/`
    },

    devtool: ifProduction('nosources-source-map', 'source-map'),
module: {
        rules: [
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.(ttf|eot|svg?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader?name=fonts/[name].[ext]'
            },
            {
                test: /\.(png|jpg|ico|svg|eot|ttf|woff|woff2)$/,
                loader: 'url-loader'
            }
        ]
    },

有人可以帮我解决这方面的问题吗？

【问题讨论】：

标签： javascript css reactjs webpack font-face

【解决方案1】：

尝试将 url 字符串包含在 font-face 定义中的引号中。如下所示。

// Note the quotation marks

src: url("/0.0.1/fonts/f9c391f982c59a955bb0e1866fbbed4a.woff2") format("woff2"),
     url("/0.0.1/fonts/ac4b1e27ea3661e299554aaa429e97c5.woff") format("woff");

【讨论】：