使用 webpack 加载字体：字体解码问题

Question

我正在尝试将 google 字体加载到我的网络应用程序（基于 angular 但不相关），但出现此错误：

Failed to decode downloaded font: https://fonts.googleapis.com/css?family=Open+Sans

我的 webpack.config.js 的相关部分是：

loaders: [
        {test: /\.less$/, loader: "style!css!less", exclude: /node_modules|bower_components/},
        {test: /\.woff(2)$/, loader: "url?limit=10000&minetype=application/font-woff"}
]

我的 style.less 是：

@font-face {
    font-family: "myFont";
    font-style: normal;
    src: url(https://fonts.googleapis.com/css?family=Open+Sans);
}

body {
    font-family: "myFont";
}

我的猜测是它与 webpack 部分并没有真正相关，而是字体包含本身。不幸的是，我缺乏知识来找出问题的确切位置。

Answer 1

另一种方法是使用link 标签加载CSS。然后在自定义CSS.

中定义字体

示例：

  <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
    <style type="text/css">
       body { 
          font-family:'Abel',Sans; 
       }

    </style>

Answer 2

我建议您看看 Paul Irish 在 2009 年发表的这篇文章 Bulletproof @font-face syntax

它非常详细地解释了如何在所有（或至少所有可用的）浏览器中启动和运行网络字体。

使用 webpack 加载字体：字体解码问题

Loading fonts with webpack: font decode issue

css

fonts

less

font-face

webpack