无法在 lambda 生产应用程序上解码下载的字体

Question

我正在尝试使用无服务器模块将 Angular Web 应用程序部署到 amazon lambda。当我在本地运行应用程序时，一切正常。当我将应用程序部署到 AWS 时出现了问题。部署应用程序后，应用程序运行正常，但某些字体似乎丢失且无法正确显示。这是 Chrome 开发者控制台中出现的警告：

Failed to decode downloaded font: <URL>
OTS parsing error: Size of decompressed WOFF 2.0 is less than compressed     size
OTS parsing error: incorrect entrySelector for table directory
OTS parsing error: incorrect file size in WOFF header
OTS parsing error: incorrect entrySelector for table directory

这是我的环境信息：

 Your Environment Information ---------------------------
     Operating System:          win32
     Node Version:              10.16.3
     Framework Version:         1.54.0
     Plugin Version:            3.1.2
     SDK Version:               2.1.2
     Components Core Version:   1.1.1
     Components CLI Version:    1.4.0

Intuiton 告诉我 webpack 有问题。所以这里是 webpack.server.config.js：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    server: './server.ts',
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  externals: [/(node_modules|main\..*\.js)/,],
  output: {
    libraryTarget: 'commonjs2',
      path: path.join(__dirname, 'dist/'),
    filename: '[name].js'
  },
  resolve: {
    modules: [
      /* assuming that one up is where your node_modules sit,
         relative to the currently executing script
      */
      path.join(__dirname, '/node_modules')
    ]
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  },
  optimization: {
    minimize: false
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
}

非常感谢您的帮助:)

Answer 1

您需要正确地为这些字体提供每种可能的浏览器支持：

@font-face {
    font-display: swap;
    font-family: 'YourFontFamilyName';
    /* IE9 Compat Modes */
    src: url('/path/to/yourfont.eot');
    /* IE6-IE8 */
    src: url('/path/to/yourfont.eot?#iefix') format('embedded-opentype'),
        /* Super Modern Browsers */ url('/path/to/yourfont.woff2') format('woff2'),
        /* Pretty Modern Browsers */ url('/path/to/yourfont.woff') format('woff'),
        /* Safari, Android, iOS */ url('/path/to/yourfont.ttf') format('truetype'),
        /* Legacy iOS */ url('/path/to/yourfont.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

另外，在您的 lambda 函数中，将 'application/x-font-ttf' 行替换为：

'font/ttf',
'font/woff',
'font/woff2'

干杯