Googleフォントの使い方

3827 ワード

私たちは私たちのアプリでいくつかの美しいフォントを使用したいので、私はこの記事でそれを行う方法をお教えします.私は次に使います.JS今日は他のフレームワーク/ライブラリやバニラでも使用できます.手順はかなり同じになるだろう.

アプリの設定

次を作る.jsアプリ

npx create-next-app next-tailwind-ts-demo

クリーンアップ

このようなフッターまでヘッドタグの下のすべてを削除

import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
    </div>
  );
}

アプリにTarwindを追加する

依存関係のインストール-

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest # yarn
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest # npm

設定ファイルの生成-

npx tailwindcss init -p

これはtailwind.config.jsとpostcss.config.jsを生成します
ファイルをパージ
これをtailwind.config.jsでパージします

  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],

グローバル変数を変更します.CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

アプリの起動

yarn dev # yarn
npm run dev # npm

カスタムフォント

Google Fontsに移動し、あなたのアプリケーションで必要なフォントを選択します.
私はこのデモのRampart Oneを使用するつもりです.

をクリックして、このスタイルを選択してください.

現在、Webセクションで使用されるインポートURLをコピーします.

フォントの使用

フォントを使用するには、次の手順に従います.

で輸入をペーストします

@import url("https://fonts.googleapis.com/css2?family=Rampart+One&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

テーマの内側に

を拡張し、フォントを名前に与える

 theme: {
    extend: {
      fontFamily: {
       Rampart: ["Rampart One", "cursive"],
      },
    },
  },

配列の規則は、Googleフォントで与えられたものと同じであるべきです.

現在、この場合はフォントのフォント名の任意のタグを指定できます.

<h1 className="font-Rampart">This is using a custom font</h1>

今、あなたは必要な美しいフォントを持っている🥳.

便利なリンク
Github repository
TailwindCSS
Google Fonts
All socials

Reference

この問題について(Googleフォントの使い方), 我々は、より多くの情報をここで見つけました https://dev.to/byteslash/how-to-use-google-fonts-in-tailwindcss-5050

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[SWEA 9229]ハンビンとSpotMart

CentOS 7インストール構成redis