カスタムフォントの使い方
6045 ワード
このセクションでは、Google WindowフォントをTailWindCSSに追加します.私たちはカスタムWindow @ importとlinkメソッドを見ることができます.まず、インストールしたり設定したりする必要があります.
view
@ importメソッドを使用してカスタムフォントをCSSに追加します.TruwindディレクティブファイルでGoogle CSS CSS URLを追加する必要があります.
src/input.CSSまたはメイン.CSSまたは風車.CSS
そよ風設定.js
リンクメソッドを使用してHTMLファイルにカスタムフォントを追加します.
view
例1
@ importメソッドを使用してカスタムフォントをCSSに追加します.TruwindディレクティブファイルでGoogle CSS CSS URLを追加する必要があります.
src/input.CSSまたはメイン.CSSまたは風車.CSS
@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
次に、あなたの尾風にfontfamilyを追加する必要があります.設定.jsそよ風設定.js
module.exports = {
theme: {
extend: {
fontFamily: {
'culpa': ['"Mea Culpa"', 'cursive']
}
},
},
plugins: [],
}
インデックス.HTML<div class="container mx-auto">
<h1 class="text-4xl font-culpa">Tailwind CSS 3</h1>
</div>
例2
リンクメソッドを使用してHTMLファイルにカスタムフォントを追加します.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Google Fonts</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap" rel="stylesheet">s
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'culpa': ['"Mea Culpa"', 'cursive']
}
}
}
}
</script>
</head>
<body>
<div class="container m-12 mx-auto">
<h1 class="text-6xl font-culpa">Tailwind CSS 3</h1>
</div>
</body>
</html>
Reference
この問題について(カスタムフォントの使い方), 我々は、より多くの情報をここで見つけました https://dev.to/larainfo/tailwind-css-use-custom-fonts-example-239kテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol