SymbolFYI

Web Fonts (@font-face)

Web & HTML

Определение

Custom fonts loaded via CSS @font-face rules, enabling rich typography beyond system-installed fonts.

Symbol Fonts

Symbol fonts are typefaces that map their glyphs to Unicode code points in the Symbol, Ornaments, or other character blocks—or in some legacy cases, use arbitrary non-standard mappings that predate Unicode. Understanding how symbol fonts work is important for ensuring consistent rendering across platforms and for migrating legacy symbol content to modern Unicode.

Unicode Symbol Fonts

Modern symbol fonts follow Unicode standards, placing glyphs at their correct code points:

Noto Symbols

Google's Noto project includes several symbol-focused fonts: - Noto Sans Symbols: Mathematical, technical, and miscellaneous symbols - Noto Sans Symbols 2: Additional blocks (Braille, chess, domino, game symbols) - Noto Emoji: Color and black-and-white emoji - Noto Music: Musical symbols

Noto fonts are designed to provide complete Unicode coverage across all scripts, eliminating missing-glyph boxes (tofu).

Segoe UI Symbol

Included with Windows, Segoe UI Symbol covers thousands of Unicode symbols and is commonly used as a fallback in Windows font stacks:

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Explicit fallback for symbols */
.symbol {
  font-family: 'Segoe UI Symbol', 'Apple Symbols', sans-serif;
}

Legacy Symbol Fonts (Non-Unicode)

Wingdings

Wingdings (1992) was designed for Windows 3.1 when Unicode was not yet established. It maps arbitrary symbol glyphs to ASCII code points, meaning the byte A (0x41) renders as a hand pointing right rather than the letter A.

The Wingdings mapping does not correspond to Unicode code points, creating significant portability problems: - A document authored with Wingdings renders as garbage if the font is not available - The symbols have no Unicode identity and cannot be searched or indexed - Screen readers cannot interpret the characters correctly

Symbol (Type 1)

Adobe's Symbol font similarly maps Greek letters and mathematical symbols to ASCII code points. The Greek letter α (alpha) sits at position 0x61 (normally a), not at U+03B1 where Unicode places it.

Migration to Unicode

For content using legacy symbol fonts, migration involves substituting Unicode equivalents:

# Partial Wingdings to Unicode mapping
WINGDINGS_MAP = {
    '\u00A0': '\u00A0',  # space → space
    '!': '\u270F',  # ✏ PENCIL
    '"': '\u2702',  # ✂ BLACK SCISSORS
    '#': '\u2701',  # ✁ UPPER BLADE SCISSORS
    '$': '\u2704',  # ✄ WHITE SCISSORS
    # ... 200+ more entries
}

def convert_wingdings(text: str) -> str:
    return ''.join(WINGDINGS_MAP.get(c, c) for c in text)

Icon Fonts

Modern icon fonts (Font Awesome, Material Icons, Ionicons) use the Private Use Area (PUA, U+E000–U+F8FF) to avoid conflicts with standard Unicode characters:

/* Font Awesome approach */
.fa-home::before {
  font-family: 'Font Awesome 6 Free';
  content: '\f015';  /* PUA code point → home icon glyph */
}

PUA-based icon fonts have accessibility limitations because PUA characters have no standardized semantic meaning that screen readers can announce. SVG icons with aria-label are the recommended modern alternative.

Font Fallback for Symbols

/* System font stack including symbol fallbacks */
body {
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Noto Sans',
    'Noto Sans Symbols',
    'Noto Sans Symbols 2',
    sans-serif;
}

Platforms include their own symbol fonts (Apple Symbols on macOS, Segoe UI Symbol on Windows) that serve as system fallbacks before the generic sans-serif family. Explicitly including Noto Symbols ensures coverage on Linux and Android systems where these platform fonts may not be available.

Связанные термины