关于font-family的URL描述符及@font-face规则的技术咨询

Hey there! Let's break down the URL layout rules for the src property in @font-face clearly, using your provided code as an example. First, here's your original rule for reference:

@font-face { 
  font-family: 'RobotoLight'; 
  src: url('../font/jura-demibold.eot'); 
  src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'), 
       url('../font/jura-demibold.woff') format('woff'), 
       url('../font/jura-demibold.ttf') format('truetype'), 
       url('../font/jura-demibold.svg#RobotoLight') format('svg'); 
  font-weight: normal; 
  font-style: normal; 
}

Core Priority Rule #

The src property relies on a comma-separated list of font sources ordered by priority — browsers will try to load the first valid source in the list, and stop once they find one they can render. This is key for cross-browser compatibility, since different browsers have historically supported different font formats.

URL & Format Layout Breakdown #

Let's walk through each part of the source entries to clarify the rules:

1. Path Structure #

• Relative paths like ../font/ are resolved based on your CSS file's location. For example, if your CSS lives in a css/ folder, ../font/ points to a sibling font/ directory one level above the CSS folder.
• You can use absolute paths (e.g., /fonts/jura-demibold.eot) or full URLs too, but relative paths are the most common for local projects to keep things portable.

2. Legacy IE Fallbacks #

• The first standalone src: url('../font/jura-demibold.eot'); is a special fallback for super old IE versions (IE8 and below) that don't support the comma-separated list syntax.
• The url('../font/jura-demibold.eot?#iefix') format('embedded-opentype') entry is for newer IE versions — the ?#iefix fragment fixes rendering glitches, and the format('embedded-opentype') tells the browser exactly what font format it's dealing with.

3. Format Hints #

Adding the format() value after the URL is optional but highly recommended:

• It lets browsers quickly check if they support the font format without downloading it first, which boosts performance.
• Common format values you'll see:
  • 'embedded-opentype': For EOT fonts (IE-specific)
  • 'woff': WOFF (Web Open Font Format) — the most widely supported modern format (works in all current browsers)
  • 'truetype': TTF (TrueType) — supported by nearly all browsers, often used as a secondary fallback
  • 'svg': SVG fonts — primarily for older iOS devices (pre-iOS 4.2)

4. SVG Font Fragment Identifier #

• For SVG fonts, the #RobotoLight fragment at the end of the URL (url('../font/jura-demibold.svg#RobotoLight')) specifies the ID of the font inside the SVG file. Since an SVG file can hold multiple fonts, this tells the browser exactly which one to use.

Quick Best Practices for Layout #

• Order sources from legacy to modern: Start with EOT for IE, then WOFF (best modern support), then TTF, then SVG.
• Stick to consistent relative paths to avoid broken links when moving your project files.
• Always include the format() hint for each source to optimize loading.
• That duplicate src declaration is intentional: the first single URL is for old IE, the second comma-separated list works for all other browsers (including newer IE versions that understand the list syntax).

内容的提问来源于stack exchange，提问作者Li Chen