nikkeyl

SSF-O - フォントの統一規格（Local、Google Fonts）

SSF-O - フォントの統一規格（Local、Google Fonts）
基準

173

4 分。

定義

SSF-O 標準は、フォントのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています。

構造とセマンティクス

現代のフレームワーク（Next.js、Nuxt、Gatsby）向けの最適な導入方法

現代の環境では、フォントを自動的に最適化するための組み込みツールの使用が推奨されています。

NextJSの組み込みソリューションを使用することで、レイアウトシフト（CLS）の自動解消、フォントのローカル読み込み、および display=swap の追加が可能になります。

import { Inter } from 'next/font/google';

const inter = Inter({
  weight: ['400', '500', '700'],
  subsets: ['cyrillic', 'latin'],
  variable: '--font-inter',
});

export { inter };

Layoutでの使用方法：

import { inter } from './fonts';

<html lang="ru" className={inter.variable}> 
  <body>{children}</body>
</html>

global.css での使用方法：

body {
  font-family: var(--font-inter), sans-serif; 
}

"純粋な"HTML/CSS/JSおよびCMSに最適なフォント読み込み方法

静的サイトやCMSでは、アクセシビリティを確保し、正しく表示させるために、フォントの読み込みを独自に管理することが重要です。

ローカル接続（@font-face）が最善の方法です：

項目説明
フォーマットWOFF2（最高の圧縮率とサポート）
配置場所public/fonts/ または assets/fonts/
クリティカルCSS@font-face はメインのCSSファイルの先頭に記述する必要がある
フォールバックフォントCLSの解消を保証する
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2"); 
  font-weight: 400; 
  font-style: normal; 
  font-display: swap;
}

body {
  font-family: "Inter", sans-serif; 
}

<link> を使用して Google Fonts を設定する方法：

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

インタラクティブ性と視覚的な反応

CLS (Cumulative Layout Shift)は、フォントのローカル読み込みとfont-display: swap;によって軽減されます。また、メインのフォントが完全に読み込まれるまでテキストを瞬時に表示するためのフォールバックフォントも忘れてはなりません。

非推奨／旧式の方法（避けるべき）

フォントの読み込みが正しく行われないと、ページの表示が遅くなり、ユーザー体験が低下する可能性があります。

方法例問題
CSSでの@import@import url("…");リソースの並列読み込みをブロックする
WOFF2以外の形式.ttf, .eot, .svg, .woff旧式でファイルサイズが大きい
font-display: swap;の欠如swapなしの @font-face { … }FOIT - フォントの読み込み完了までテキストが表示されない

類似カテゴリ:

関連記事

  • アドバイスReactコンポーネントの構造

    Reactコンポーネントの構造

    各Reactコンポーネントがどのような外観であるべきか、私の考え

    421

    13 分。

  • 基準SST - タブに関する統一規格

    SST - タブに関する統一規格

    SST規格は、タブのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています

    62

    11 分。

  • 基準SSF-U - フルスクリーン表示の統一規格

    SSF-U - フルスクリーン表示の統一規格

    SSF-U規格は、フルスクリーン表示のセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています

    248

    3 分。

  • 基準SSA - アコーディオンの統一標準

    SSA - アコーディオンの統一標準

    SSA規格は、アコーディオンのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定めています

    258

    4 分。

  • アドバイスウェブサイトにおける悪い慣行

    ウェブサイトにおける悪い慣行

    ウェブデザインにおける致命的なミスの分析。スライダー、自動再生、重いページがコンバージョン率やGoogleでの検索順位を低下させる理由

    232

    2 分。

  • 基準SSP - ページネーションの統一規格

    SSP - ページネーションの統一規格

    SSP規格は、ページネーションのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています

    240

    3 分。

  • すべての記事

ご連絡ください