javascript - 包含 webpack 和 bootstrap 4 的自定义字体类型不起作用

Question

我刚刚开始使用 webpack，想捆绑 bootstrap 4 并为其添加自定义字体。

不幸的是，我的字体堆栈总是回落到 Segoe UI (我在 Windows 上)。我不知道我在这里做错了什么。 Webpack 似乎包含该字体，但浏览器无法正确呈现它。

Webpack 输出

C:\Temp\bs-webpack> npm run build

// ...
Entrypoint main [big] = bundle.js
[0] ./src/app.js 144 bytes {0} [built]
[4] (webpack)/buildin/global.js 472 bytes {0} [built]
[5] ./src/scss/_custom.scss 512 bytes {0} [built]
[6] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--4-2!./node_modules/sass-loader/dist/cjs.js!./src/scss/_custom.scss 158 KiB {0} [built]
[9] ./src/fonts/SourceSansPro-Regular.ttf 82 bytes {0} [built]
    + 5 hidden modules    
// ..

dist/index.html

// ...
      <h1 class="text-custom-color">Header1</h1>             <-- Just a test 
      <p>Lorem ipsum dolor</p>                               <-- rendered as Segoe UI
      <div class="text-monospace">Lorem ipsum dolor</div>    <-- rendered as consolas
    <script src="bundle.js"></script>
</body>
</html>

package.json

{
  "name": "bs-webpack",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.2",
    "css-loader": "^3.2.0",
    "file-loader": "^4.3.0",
    "node-sass": "^4.13.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.0"
  }
}

app.js

import 'bootstrap';
import './scss/_custom.scss';
import './fonts/SourceSansPro-Regular.ttf';

scss/_custom.scss

$font-family-sans-serif:      "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace:       "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:            $font-family-sans-serif !default;

$body-bg: white;
$body-color: #111;

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136,
  "custom-color": #900 // just a test to see if I can access the bootstrap classes
);

@import "../../node_modules/bootstrap/scss/bootstrap";

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(scss)$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'postcss-loader', options: { plugins: function () { return [require('autoprefixer')]; } } },
                    { loader: 'sass-loader' }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}

Answer 1

将一些@font-face放入我的_custom.scss顶部使其工作。另外，我不得不使用 format(truetype) 而不是 format(ttf)。

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSansPro-Regular.ttf') format('truetype'),
       url('../fonts/SourceSansPro-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Source Code Pro';
  src: url('../fonts/SourceCodePro-Regular.ttf') format('truetype');
}