如何在Angular 2中引入自定义.otf字体？配置后未生效求解

Hey there! Let's troubleshoot why your custom fonts aren't rendering even though your code compiles fine. I've dealt with this exact issue plenty of times, so here's a step-by-step guide to get your fonts working, plus key pitfalls to check:

First, confirm your font files are in the right place. Your setup should look something like this (adjust based on your project structure):

src/
├── assets/
│   └── fonts/
│       ├── MyCustomFont-Regular.woff2
│       ├── MyCustomFont-Regular.woff
│       └── MyCustomFont-Bold.ttf
└── styles.scss

Make sure you have multiple font formats (woff2 is preferred for modern browsers, woff/ttf as fallbacks) to maximize compatibility.

The most common issue here is incorrect file paths or incomplete font-face rules. Here's a robust example to use:

// Define regular weight
@font-face {
  font-family: 'MyCustomFont'; // This name is what you'll use later
  src: url('./assets/fonts/MyCustomFont-Regular.woff2') format('woff2'),
       url('./assets/fonts/MyCustomFont-Regular.woff') format('woff'),
       url('./assets/fonts/MyCustomFont-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; // Prevents invisible text while fonts load
}

// Define bold weight (if you have it)
@font-face {
  font-family: 'MyCustomFont'; // Same family name as above
  src: url('./assets/fonts/MyCustomFont-Bold.woff2') format('woff2'),
       url('./assets/fonts/MyCustomFont-Bold.woff') format('woff'),
       url('./assets/fonts/MyCustomFont-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

• Path Notes: If your styles.scss is in a subfolder like src/styles/, adjust the path to ../assets/fonts/.... If you're using a framework like Vue/React with aliases, you can use ~@/assets/fonts/... (where @ points to your src folder) for more reliability.

Once the font is defined, you need to actually use it in your styles. Make sure to include a fallback font (like sans-serif or serif) in case the custom font fails to load:

// Apply to entire body
body {
  font-family: 'MyCustomFont', sans-serif;
}

// Or target specific elements
.header-text {
  font-family: 'MyCustomFont', serif;
  font-weight: bold; // Matches the bold font-face rule above
}

If it's still not working, run through these checks:

• 404 Errors: Open your browser's dev tools (F12), go to the Network tab, and refresh. If your font files show a 404 status, your path is wrong—double-check the relative path or alias.
• Case Sensitivity: The font-family name in your @font-face must match exactly what you use in your styles (e.g., 'MyCustomFont' vs 'mycustomfont' is not the same on case-sensitive file systems like Linux/macOS).
• Corrupted Font Files: Try opening the font file on your computer—if it won't open or displays incorrectly, replace it with a fresh copy.
• Browser Caching: Browsers often cache old resources. Force a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear your browser cache to test.
• Build Tool Configuration: If you're using Webpack/Vite, ensure your build tool is set to handle font files. Vite does this by default, but for Webpack, you may need to configure asset/resource modules to bundle font files correctly.

内容的提问来源于stack exchange，提问作者Ali Bari