nino
  • ドキュメント
  • レジストリ
  • メンバーシップ

Command Palette

Search for a command to run...

スポンサー
メニュー

Font Family

 

1分 21秒

Next.js や shadcn/ui で初期化すると最初から antialiased や Geist フォントが設定されていますが、これらは日本語にさまざまな副作用をもたらします。

  • antialiased があると Safari で文字が細くなり、視認性が下がります
  • Geist の指定があると日本語がわずかに上にずれます。ボタンのラベルが日本語である場合、ボタンの枠に対しラベルがわずかに上にずれることになります。
  • Tailwind CSS 標準の font-sans は system-ui を使用しますが、これにより Safari と Chrome で表示が大きく異なります。（Safari で視覚的な文字サイズが小さくなります）

以上の課題を解決するために、以下の対応を推奨します。

  • body から antialiased やフォント指定を削除する
  • globals.css で font-sans を日本語向きの内容に変更する
Loading...
Loading...
Discord で質問する
何か気になったこと、分からないことがあれば気軽に質問してください！
DiscordDiscordで質問する
nino

Developer

XXGitHubGitHubYouTubeYouTubeZennZennDiscordDiscord

    リンク

  • ドキュメント
  • レジストリ
  • アーキテクチャ

    ツール

  • フィード
  • ステータス

    ポリシー

  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示
ドキュメント
はじめに
  • Changelog
ガイド
  • Webアプリの環境構築
  • ニュース収集&AI要約
  • Turso のテーブル移行
  • 日時の管理
  • 中規模のリストをブラウザにキャッシュし、クライアントでフィルタする
  • Search Params Dialog
  • コードの整理
  • AGENTS.md
  • Better Auth
  • プロダクト開発ポリシー
  • 推奨ツール
  • Proxy.ts
  • 多言語対応
  • SWR
  • Cache Component
  • Next.js の課題、不具合
  • アプリ開発フロー
  • プロンプトガイド
  • CSS Tips
  • Font Family
  • セルフブランディング
  • セルフオンボーディング
  • オフィスツール
  • Email
  • Breadcrumb（パンくず）
  • 並べ替え
@theme {
  --font-sans: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <body className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased `}>
    <body>
      {children}
    </body>
  );
}