Angular 5项目IE浏览器下@font-face报错问题求助

Hey there, let's break down the IE-specific font errors you're facing in your Angular 5 project—they're actually two linked problems, so we'll tackle them together.

Root Causes #

Let's unpack each error message first:

1. CSS3114: @font-face failed OpenType embedding permission check
   IE enforces strict checks on font embedding permissions. The HelveticaLTStd-Roman.eot/otf files you're using have an embedding permission that's not set to Installable—other browsers (Chrome, Firefox) are more lenient about this, which is why it works everywhere else.

2. "无法获取未定义或空引用的属性'call'" in inline.bundle.js
   This is a secondary error triggered by the failed font load. When IE can't load the OTF font (due to either permission issues or poor native OTF support), it breaks downstream JavaScript code that depends on the font being available, leading to that undefined property error.

Step-by-Step Fixes #

1. Resolve Font Embedding Permissions #

• Replace the font file: The most reliable fix is to use a version of HelveticaLTStd-Roman that has Installable embedding permissions. If you don't have access to such a file, consider a free alternative like Arial (it's visually very similar and has universal support without permission issues).
• Verify permissions: You can check a font's embedding settings using tools like FontForge (download it locally). Look for the "Embedding" property and ensure it's set to Installable.

2. Optimize @font-face for IE Compatibility #

IE has poor support for OTF fonts, so adjust your @font-face declaration to prioritize IE-friendly formats and avoid loading OTF in IE:

@font-face {
  font-family: 'HelveticaLTStd-Roman';
  /* Prioritize EOT (IE legacy) and WOFF (modern IE + others) first */
  src: url('../fonts/HelveticaLTStd-Roman.eot?#iefix') format('embedded-opentype'),
       url('../fonts/HelveticaLTStd-Roman.woff') format('woff'),
       url('../fonts/HelveticaLTStd-Roman.ttf') format('truetype'),
       url('../fonts/HelveticaLTStd-Roman.svg#HelveticaLTStd-Roman') format('svg');
  /* IE-only hack to skip OTF loading */
  src: url('../fonts/HelveticaLTStd-Roman.otf') format('opentype')\0/;
  font-weight: normal;
  font-style: normal;
}

Alternatively, use IE conditional comments to serve a separate stylesheet that excludes the OTF source.

3. Confirm Angular Asset Configuration #

Since your font files are hashed (like HelveticaLTStd-Roman.92fa3700314207f8e4a0.eot), make sure your angular.json is configured to copy the fonts folder to the build output:

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/fonts" // Add this line if missing
],

This ensures the hashed font files are accessible at the correct path after Angular builds the project.

4. Ensure IE Polyfills are Enabled #

Angular 5 requires specific polyfills to work correctly in IE. Open src/polyfills.ts and make sure these lines are uncommented:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

These polyfills help prevent JavaScript errors when IE encounters unsupported features (like those triggered by failed font loads).

内容的提问来源于stack exchange，提问作者Nemanja Grabovac