我最近需要使用本地应用程序中的字体,这些字体早先在 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/