web-dev-qa-db-ja.com

ローカルファイルのフォントをグローバルに追い風にする

現在私は自分のスタイルタグでこれをやっています

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

* {
  font-family: 'Roboto', sans-serif;
}

しかし、Robotoフォントをダウンロードし、それらのファイルとフォントをすべての要素に対してグローバルに使用するようにTailwindを構成する方法を知りたいのですが。

サイドノート：

私はVuejsを使用しており、VueここからTailwindをセットアップする方法に関するガイドに従っています

https://www.youtube.com/watch?v=xJcvpuELcZo

javascripthtmlcsstailwind-css
1
Question3r

npm install tailwindcssを使用して、プロジェクトへの依存関係としてインストールされている場合は、Tailwindをカスタマイズできます。

手順：

  • ダウンロードしたフォントをコピーして、プロジェクト内のfontsフォルダーに配置します。

  • npx tailwind initを実行して、空のtailwind.config.jsを生成します

  • Inside tailwind.config.js add fontFamily inside extendを指定して、オーバーライドするフォントファミリーを指定します（Tailwindのデフォルトファミリーはsansです）。新しく追加されたフォントファミリーを最初に配置します（ 順序が重要 ）

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Roboto', 'Helvetica', 'Arial', 'sans-serif']
      }
    },
  },
  variants: {},
  plugins: []
}

重要：extendを使用すると、Tailwindのフォントスタック全体を上書きせずに、新しく指定されたフォントファミリーが追加されます。

次に、メインのtailwind.cssファイル（すべての追い風機能をインポートする場所）で、ローカルフォントファミリーをインポートできます。このような：

@tailwind base;
@tailwind components;

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), url(./fonts/Roboto-Regular.ttf) format('ttf');
}

@tailwind utilities;

次に、CSSを再コンパイルします。 Tailwindのドキュメント をフォローしている場合、これは通常 postcss を使用して行われます。

postcss css/tailwind.css -o public/tailwind.css

Postcssを使用していない場合は、次のコマンドを実行できます。

npx tailwindcss build css/tailwind.css -o public/tailwind.css

新しく追加したフォントファミリがレンダリングされます。

4
Juan Marco