css - 防止字体嵌入到 webpack 生成的 css 中

标签 css webpack fonts sass

我最近需要使用本地应用程序中的字体,这些字体早先在 http://fonts.googleapis.com/css?family=Open+Sans 中引用过,早期的字体在 sass 中被引用为:

@import url("https://fonts.googleapis.com/css?family=Maven+Pro");

我从 npm 安装字体并在 sass 中导入,例如:

 @import url("../node_modules/typeface-maven-pro?family=Maven+Pro");

现在 webpack 正在生成 21MB 的 css,而之前是 320kb。正如我在检查时所怀疑的那样,我发现字体以十六进制形式嵌入到 css 中,例如:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url(data:application/vnd.ms-fontobject;base64,h3cBAKF2AQACAAIABAAAAAILAwYDBQQCAgQBASwBAAAIAExQ7wIA4FsgAEAoAAAAAAAAAJ8BACAAAAAAhvcg1AAAAAAAAAAAAAAAAAAAAAAAAB4ATwBwAGUAbgAgAFMAYQBuAHMAIABMAGkAZwBoAHQAAAAMAEkAdABhAGwAaQBjAAAAGABWAGUAcgBzAGkAbwBuACAAMQAuADEAMAAAACwATwBwAGUAbgAgAFMAYQBuAHMAIABMAGkAZwBoAHQAIABJAHQAYQBsAGkAYwAAAAAAQlNHUAAAAAAAAAAAAAAAAAAAAAADAuoIAVbNAW9TAWcEFM3pjMl4WmfKaWN3hnx6JmO6ojRvSI1U6OiPDyQA0a+M0J9YQcEiqJaAbQHtU1iDq2Bnl7ejJ8rC41GlgOAY9I5OWoJSjiHI9DfkJpbKlOMkLprn1q4rVvWzbCf930p8703JJ0nHo31vHRYa4ebmnW+8zvx0RSUd2QcQKhRRo8nvU8UADxYMUJeXBpGj9aUg2Y3ZEO8tyX0zEQ8MFqgcOnR8pISExrfRL3Kn98z3gkfclmOhXwU+6M5ofsi1WApsIrGHO/rqog6zb5GuKGJqPCcnakQVQwmY1GfEOjxb7S46r4JgLa3OY2lM3fgsJ9aTZ064fU8mjZeQbdUAkJ8PsdL8B/tWQlQHFypDF97cLNa/WrONAi9AOGESW+kaQLHIzIDHRCcAZUFo7BTXwsgaANXHRc3rVvIA81wZ+yMjSbDO85h+KgPt4VMqvTImD1Qz8DysK7dGEA/PSL6oopAt7H1sC29hY3uJcsr3ZmFTWc/DGrYsU4nAbr6C3A9k+iWgah08uphgGlfwhyLWAr5u7gptDVTVJY9HuHLyoy6LLB3a6eC6DKF1rYawTIQf3sw44lKgl9sU2/R9D9iKRjZqcamQkszEufXMUfXMUHEUHEUHEUHBiDjVH1zFH1zFH1zFBM1R9cxR9cxR91Yj6mVH1zHrzbncHebc7g70IqhGTg+BA+BBRVBRXYH2bwjzN4R5m8DvJ7dlQb3bY7Qa7FsjqCeZvCOs3gd4/b7s2saCa3P0IJXbk6ET/YG+fEeLdrPbqbTTZVng6zeB369OTrN4HfTtJHi86tE1B1m8DuJUxBFiOraEdW0IEWDvViIBHUKEcW+I4zeB3e7Rh3+nFpUbWlRteAgHija8BG1+Qd6P3Gm2bwgOoRteEdxwI2c0zeEaXhRpeFBnQN7/7whnQN++WwWyBzLSCtgPX6B3qA71GTEUb8G2KRoP83Pu7Gk7SkyX5RvlPQ8yX5UHTBvyFgybFRnxfNpu0pm593Y0r7TtPbvWzXLCgRFAIVA5VGCxRvrE+AR7YZbxLS26Xg0BA0Ab5jpwje92z3MahbyvMFLRvrRCuILgQLgTZYgBQ);

请注意,我必须截断编码文本中的字体,因为堆栈溢出中的问题字符限制为 30000 个字符,并且有多个这样的字体。

这里有什么问题吗?

最佳答案

问题出在我的字体加载器上,就像用于字体一样。我正在使用 url-loader 像:

{
     test: /\.(jpg|png|gif|eot|woff2|woff|ttf|ico|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
     loader: 'url-loader'
}

解决方案是修改它限制文件大小并拆分较大的文件,如:

{
   test: /\.(woff2|woff|ttf|eot|svg|otf)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
   loaders: ["url-loader?limit=100&name=fonts/[name]_[hash].[ext]"]
}

关于css - 防止字体嵌入到 webpack 生成的 css 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48947734/

相关文章:

jquery - 悬停时逐行突出显示段落

html - flex-start 和 baseline 有什么区别?

jQuery UI 日期选择器样式损坏

webpack - 如何使用 "Short"路径访问 Webpack 模块(如 "Global Require"对于 Babel/NPM)

css - 下载集合中的字体时如何实现谷歌字体?

jquery - 组合文本框和下拉列表

javascript - Webpack 导入 LESS 文件时抛出 TypeError : Super expression must either be null or a function, not undefined

javascript - Babel 带有正则表达式的意外标记

iOS 自定义字体不显示在设备上

css - firefox 上的 font-face 在使用 font-weight normal 时会导致问题