使用 webpack 2 和 vue-cli 加载本地字体

Posted 2023-02-22

【中文标题】使用 webpack 2 和 vue-cli 加载本地字体

【英文标题】：Loading in local fonts with webpack 2 and the vue-cli

【发布时间】：2018-01-27 09:09:47

【问题描述】：

我正在使用 vue-cli webpack 模板，并尝试在我的项目中加载本地字体。我无法正确获取字体的路径。我的路径应该是什么样子？

我发现了一些关于我可能做错了什么的信息，但我无法弄清楚：https://github.com/webpack-contrib/sass-loader#problems-with-url

文件结构：

在我的 _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')
  

如何使用 vue-cli webpack 模板加载我的本地字体？

【参考方案1】：

我以这种方式导入我的字体：

$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 //
// ***************** //

我所有的字体都位于src/assets/fonts/

我的webpack.base.conf 文件包含这个加载器：

 
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: 
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    
  ,

【讨论】：

在卡住并忘记相对路径不起作用后为我工作。谢谢！

太棒了。没有 svg 字体将有助于包含 svg 图像:)

【参考方案2】：

在我正在做的 vuejs 项目中，

这个没用：

@font-face 
   font-family: 'name-of-choice';
   src: url("~@/assets/<location-to-your-font-file>/font-file-name.ttf") format('font-type');

这行得通：

@font-face 
   font-family: 'name-of-choice';
   src: url(~@/assets/<location-to-your-font-file>/font-file-name.ttf) format('font-type');

我观察到，如果我们一次使用不带双引号的解决方案，然后添加双引号，它会再次起作用！如果有人知道这里发生了什么，请回答。

解决方案： 尽量不要在引号中包含 URL字符串。