使用 webpack 2 和 vue-cli 加载本地字体 [英] Loading in local fonts with webpack 2 and the vue-cli
问题描述
我正在使用 vue-cli webpack 模板,并尝试在我的项目中加载本地字体.我无法正确获取字体路径.我的路径应该是什么样的?
我找到了一些关于我可能做错了什么的信息,但我无法弄清楚:
在我的 _fonts.scss 中:
//Webfont: LatoLatin-Regular@字体脸{字体系列:'LatoLatinWeb';src: url('../assets/fonts/LatoLatin-Regular.eot');/* IE9 兼容模式 */src: url('../assets/fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */url('../assets/fonts/LatoLatin-Regular.woff2') 格式('woff2'),/* 现代浏览器 */url('../assets/fonts/LatoLatin-Regular.woff') 格式('woff'),/* 现代浏览器 */url('../assets/fonts/LatoLatin-Regular.ttf') 格式('truetype');字体样式:正常;字体粗细:正常;文本渲染:优化易读性;}
Webpack.base.config.sj:
<代码> {测试:/.(woff2?|eot|ttf|otf)(?.*)?$/,loader: 'url-loader',选项: {限制:10000,名称:utils.assetsPath('fonts/[name].[hash:7].[ext]')}}
Utils.js:
返回 {CSS:生成加载器(),postcss: generateLoaders(),少:generateLoaders('少'),sass: generateLoaders('sass', { indentedSyntax: true }),scss: generateLoaders('sass').concat({loader: 'sass-resources-loader',选项: {资源:path.resolve(__dirname, '../src/styles/_variables.scss')}}). 连接({loader: 'sass-resources-loader',选项: {资源:path.resolve(__dirname, '../src/styles/mixins/_mixins.scss')}}). 连接({loader: 'sass-resources-loader',选项: {资源:path.resolve(__dirname, '../src/styles/_fonts.scss')}}),手写笔:generateLoaders('stylus'),styl: generateLoaders('stylus')}
如何使用 vue-cli webpack 模板加载本地字体?
我以这种方式导入字体:
$font_path: '~@/assets/fonts/';//***********////源 SANs////斜体@字体脸{字体系列:'Source Sans Pro';src : url($font_path +'SourceSansPro-Italic.eot');/* IE9 兼容;模式 */src : url($font_path +'SourceSansPro-Italic.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */url($font_path +'SourceSansPro-Italic.woff2') format('woff2'),/* 现代浏览器 */url($font_path +'SourceSansPro-Italic.woff') format('woff');/* 现代浏览器 */字体样式:斜体、斜体;字体粗细:400;文本渲染:优化易读性;}//常规的@字体脸{字体系列:'Source Sans Pro';src : url($font_path +'SourceSansPro-Regular.eot');/* IE9 兼容;模式 */src : url($font_path +'SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */url($font_path +'SourceSansPro-Regular.woff2') format('woff2'),/* 现代浏览器 */url($font_path +'SourceSansPro-Regular.woff') format('woff');/* 现代浏览器 */字体样式:正常;字体粗细:400;文本渲染:优化易读性;}//半粗体@字体脸{字体系列:'Source Sans Pro';src : url($font_path +'SourceSansPro-Semibold.eot');/* IE9 兼容;模式 */src : url($font_path +'SourceSansPro-Semibold.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */url($font_path +'SourceSansPro-Semibold.woff2') format('woff2'),/* 现代浏览器 */url($font_path +'SourceSansPro-Semibold.woff') format('woff');/* 现代浏览器 */字体样式:正常;字体粗细:600;文本渲染:优化易读性;}//在您的代码中使用font-family: $source_sans_pro".$source_sans_pro : 'Source Sans Pro', sans-serif;//[END] 源 SANs////*****************//
我所有的字体都位于 src/assets/fonts/
我的 webpack.base.conf
文件包含这个加载器:
<代码> {测试:/.(woff2?|eot|ttf|otf)(?.*)?$/,loader: 'url-loader',选项: {限制:10000,名称:utils.assetsPath('fonts/[name].[hash:7].[ext]')}},
I'm using the vue-cli webpack template and I'm trying to load in local fonts in my project. I'm having trouble getting the path to my fonts correct. How should my path look like?
I found some information about what I might be doing wrong but I couldn't figure it out: https://github.com/webpack-contrib/sass-loader#problems-with-url
File structure:
In my _fonts.scss:
// Webfont: LatoLatin-Regular
@font-face {
font-family: 'LatoLatinWeb';
src: url('../assets/fonts/LatoLatin-Regular.eot'); /* IE9 Compat Modes */
src: url('../assets/fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../assets/fonts/LatoLatin-Regular.woff2') format('woff2'), /* Modern Browsers */
url('../assets/fonts/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */
url('../assets/fonts/LatoLatin-Regular.ttf') format('truetype');
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
}
Webpack.base.config.sj:
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
Utils.js:
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/styles/_variables.scss')
}
}
).concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/styles/mixins/_mixins.scss')
}
}
).concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/styles/_fonts.scss')
}
}
),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
How do I load my local fonts in with vue-cli webpack template?
I import my fonts this way:
$font_path: '~@/assets/fonts/';
// *********** //
// SOURCE SANS //
// ITALIC
@font-face{
font-family : 'Source Sans Pro';
src : url($font_path +'SourceSansPro-Italic.eot'); /* IE9 Compat; Modes */
src : url($font_path +'SourceSansPro-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url($font_path +'SourceSansPro-Italic.woff2') format('woff2'), /* Modern Browsers */ url($font_path +'SourceSansPro-Italic.woff') format('woff'); /* Modern Browsers */
font-style : italic, oblique;
font-weight : 400;
text-rendering : optimizeLegibility;
}
// REGULAR
@font-face{
font-family : 'Source Sans Pro';
src : url($font_path +'SourceSansPro-Regular.eot'); /* IE9 Compat; Modes */
src : url($font_path +'SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url($font_path +'SourceSansPro-Regular.woff2') format('woff2'), /* Modern Browsers */ url($font_path +'SourceSansPro-Regular.woff') format('woff'); /* Modern Browsers */
font-style : normal;
font-weight : 400;
text-rendering : optimizeLegibility;
}
// SEMI BOLD
@font-face{
font-family : 'Source Sans Pro';
src : url($font_path +'SourceSansPro-Semibold.eot'); /* IE9 Compat; Modes */
src : url($font_path +'SourceSansPro-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url($font_path +'SourceSansPro-Semibold.woff2') format('woff2'), /* Modern Browsers */ url($font_path +'SourceSansPro-Semibold.woff') format('woff'); /* Modern Browsers */
font-style : normal;
font-weight : 600;
text-rendering : optimizeLegibility;
}
// Use "font-family: $source_sans_pro" in your code.
$source_sans_pro : 'Source Sans Pro', sans-serif;
// [END] SOURCE SANS //
// ***************** //
All my fonts are located in src/assets/fonts/
My webpack.base.conf
file contains this loader:
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
这篇关于使用 webpack 2 和 vue-cli 加载本地字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!