Webpack “ошибка анализа OTS” загружающиеся шрифты
Моя конфигурация webpack указывает, что шрифты должны быть загружены с помощью url-loader, и когда я пытаюсь просмотреть страницу с помощью Chrome, я получаю следующую ошибку:
OTS parsing error: invalid version tag
Failed to decode downloaded font: [My local URL]
Соответствующие части моей конфигурации похожи на это:
{
module: {
loaders: [
// ...
{
test: /\.scss$/,
loaders: ['style', 'css?sourceMap', 'autoprefixer', 'sass?sourceMap'],
},
{
test: /images\/.*\.(png|jpg|svg|gif)$/,
loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
},
{
test: /fonts\/.*\.(woff|woff2|eot|ttf|svg)$/,
loader: 'file-loader?name="[name]-[hash].[ext]"',
}
],
},
}
Этого не происходит в Safari, и я не попробовал Firefox.
В разработке я служу файлам через webpack-dev-server, в производстве они записаны в диск и скопированы в S3; в обоих случаях я получаю то же поведение в Chrome.
Это также происходит с увеличенными изображениями (больше, чем предел 10 КБ в конфигурации загрузчика изображения).
1 ответ
Лучший и самый легкий метод к base64, кодируют файл шрифтов. И используйте его в поверхности шрифта. Для кодирования перейдите к папке, имеющей файл шрифтов, и используйте команду в терминале:
base64 Roboto.ttf > basecodedtext.txt
Вы получите выходной файл под названием basecodedtext.txt. Открытый тот файл. Удалите любые пробелы в этом.
Копия, которые кодируют и добавляют следующую строку к файлу CSS:
@font-face {
font-family: "font-name";
src: url(data:application/x-font-woff;charset=utf-8;base64,<<paste your code here>>) format('woff');
}
Затем можно использовать font-family: "font-name" в CSS.