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

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

 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

这是我的环境信息:

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(\\|\/)(.+)?/,{}
    )
  ]
}

Intuiton告诉我webpack出了点问题。这是webpack.server.config.js:

GeometryReader { proxy in
    VStack(alignment: .center,spacing: 0) {
        HStack {
            Image("medal \(self.place)").resizable()
                .foregroundColor(self.color)
                .frame(width: 40,height: 40)

            Spacer()
            Text(self.username)
                .minimumScaleFactor(0.1)
                .font(.bold(16))
                .lineLimit(1)
                .frame(alignment: .trailing)
                .foregroundColor(Color("mediumTextColor"))
                .layoutPriority(1)

        }
        .padding(.top,10)
        .padding(.horizontal,10)
        Spacer()
        Text(self.score)
            .font(.extraBold(60))
            .foregroundColor(self.color)
            .lineLimit(1)
            .minimumScaleFactor(0.1)
            .layoutPriority(1)
            .padding(.horizontal,10)
            .padding(.bottom,10)
            .offset(y: -10)
    }
    .frame(width: proxy.size.width,height: proxy.size.height,alignment: .top)
}
.frame(maxHeight: 130)

一些帮助将不胜感激:)

zhangchengmao 回答:无法在Lambda生产应用程序上解码下载的字体

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

@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'

欢呼

本文链接:https://www.f2er.com/3143321.html

大家都在问