web-dev-qa-db-ja.com

webpack2とvue-cliを使用してローカルフォントを読み込む

Vue-cli webpackテンプレートを使用していて、プロジェクトにローカルフォントを読み込もうとしています。フォントへのパスを正しく取得できません。私の道はどのように見えるべきですか？

私は自分が間違っているかもしれないことについていくつかの情報を見つけましたが、それを理解することができませんでした： https://github.com/webpack-contrib/sass-loader#problems-with-url

ファイル構造：

enter image description here

私の_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テンプレートを使用してローカルフォントをロードするにはどうすればよいですか？

fontswebpackvue.jsvuejs2webpack-2
8
user1081577

私は自分のフォントを次のようにインポートします：

$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]')
    }
  },
11
George Abitbol

私が取り組んでいる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');
}

また、二重引用符なしのソリューションを1回使用してから、二重引用符を追加すると、再び機能することがわかりました。ここで何が起こっているのか誰かが知っているなら、答えてください。

解決策：囲まないようにしてください URL文字列引用符。

0
kiran dahibhate