我最近需要使用早先从http://fonts.googleapis.com/css?family=Open+Sans引用的本地应用程序中的字体,早期的字体在sass中引用如下:
@import url("https://fonts.googleapis.com/css?family=Maven+Pro");
我从npm& amp;安装了字体像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个字符&有这样的多个字体。
这里有什么问题?
答案 0 :(得分:0)
问题在于我的装载机用于字体的字体。我正在使用{
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]"]
}
解决方案是修改限制文件大小并拆分较大的文件,如:
onSubmit()