无法在Lambda生产应用程序上解码下载的字体 [英] Failed to decode downloaded font on lambda production app

问题描述

我正在尝试使用无服务器模块将有角度的Web应用程序部署到Amazon Lambda.当我在本地运行该应用程序时，一切正常.当我将应用程序部署到AWS时出现问题.部署应用程序后，该应用程序可以正常工作，但是某些字体似乎丢失并且无法正确显示.以下是Chrome开发者控制台中出现的警告:

I am trying to deploy an angular web app to amazon lambda with the serverless module. When I run the app in local everything works fine. The problem comes up when I deploy the app to AWS. Once the app is deployed, the app is working fine but some fonts appear to be missing and do not display correctly. This are the warnings that come up in the Chrome developer console:

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:

Intuiton tells me that there is something wrong with webpack. So here is the 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'),
      {}
    )
  ]
}

一些帮助将不胜感激:)

Some help would be very much appreciated :)

推荐答案

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

You need to properly provide each possible browser support for those fonts:

@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'行替换为:

Also, on your lambda function, replace the 'application/x-font-ttf' line by these:

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

欢呼

这篇关于无法在Lambda生产应用程序上解码下载的字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！