pretendard
v1.3.9
韓国語|英語| 日本語
Pretendardは、クロスプラットフォーム上の製品を提供する自然なフォントであり、多言語のタイポグラフィの自然なフォントです。 Inter、Bono Dick、およびM Plus 1Pに基づいてトリミングされるPretendardsは、読み取り環境で読みやすさと視覚的修正のために追加のタスクを実行する必要はありません。
Pretendardは9つの厚さで提供されており、可変フォントもサポートされています。
Pretendardの背景と機能の詳細、およびOpentype機能については、こちらを見つけることができます。
特定の環境に適したプレエンダードを使用するために行きます。
CDNを使用してPretendardを使用でき、JSDELIVRに加えてCDNJSとUNPKGSを使用できます。これは、デフォルトで推奨され、デフォルトで推奨されます。
以下のコードを使用して、PretendardをWebフォントとして使用します。使用されるフォントファミリー名はPretendardです。
< link rel =" stylesheet " as =" style " crossorigin href =" https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css " /> < link rel =" stylesheet " as =" style " crossorigin href =" https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css " /> < link rel =" stylesheet " as =" style " crossorigin href =" https://unpkg.com/[email protected]/dist/web/static/pretendard.css " /> @import url ( "https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" ); @import url ( "https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css" ); @import url ( "https://unpkg.com/[email protected]/dist/web/static/pretendard.css" );Pretendardは、Webフォントの問題を解決する方法としてGoogleフォントが提供するハングルフォントと同じ方法で動的サブセットを提供します。ページに含まれる文字を選択的にダウンロードするには、以下のコードを使用して、Pretendardをより速く使用します。使用されるフォントファミリー名はPretendardです。
< link rel =" stylesheet " as =" style " crossorigin href =" https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css " /> < link rel =" stylesheet " as =" style " crossorigin href =" https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard-dynamic-subset.min.css " /> < link rel =" stylesheet " as =" style " crossorigin href =" https://unpkg.com/[email protected]/dist/web/static/pretendard-dynamic-subset.css " /> @import url ( "https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css" ); @import url ( "https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard-dynamic-subset.min.css" ); @import url ( "https://unpkg.com/[email protected]/dist/web/static/pretendard-dynamic-subset.css" );可変ダイナミックサブセットは、可変重量属性として、および従来の動的サブよりも大幅に少ない容量を持つプレエンダードとして使用できます。以下のコードを使用して、最新のブラウザでより快適にPretendardを使用します。フォントファミリー名は"Pretendard Variable"です。
< link rel =" stylesheet " as =" style " crossorigin href =" https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css " /> < link rel =" stylesheet " as =" style " crossorigin href =" https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable-dynamic-subset.min.css " /> < link rel =" stylesheet " as =" style " crossorigin href =" https://unpkg.com/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css " /> @import url ( "https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css" ); @import url ( "https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable-dynamic-subset.min.css" ); @import url ( "https://unpkg.com/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css" );以下のコードを使用して、可変重量属性を使用します。フォントファミリー名は"Pretendard Variable"です。
< link rel =" stylesheet " as =" style " crossorigin href =" https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css " /> < link rel =" stylesheet " as =" style " crossorigin href =" https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css " /> < link rel =" stylesheet " as =" style " crossorigin href =" https://unpkg.com/[email protected]/dist/web/variable/pretendardvariable.css " /> @import url ( "https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" ); @import url ( "https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css" ); @import url ( "https://unpkg.com/[email protected]/dist/web/variable/pretendardvariable.css" );システムを可能な限り一致させたい場合は、以下のフォントファミリー構成をお勧めします。
font-family : -apple-system , BlinkMacSystemFont , "Apple SD Gothic Neo" , "Pretendard Variable" , Pretendard , Roboto , "Noto Sans KR" , "Segoe UI" , "Malgun Gothic" , "Apple Color Emoji" , "Segoe UI Emoji" , "Segoe UI Symbol" , sans-serif;どこにでも同じ環境が必要な場合は、次のフォントファミリー構成をお勧めします。
font-family : "Pretendard Variable" , Pretendard , -apple-system , BlinkMacSystemFont , system-ui , Roboto , "Helvetica Neue" , "Segoe UI" , "Apple SD Gothic Neo" , "Noto Sans KR" , "Malgun Gothic" , "Apple Color Emoji" , "Segoe UI Emoji" , "Segoe UI Symbol" , sans-serif;Pretendardは、次のパッケージマネージャーで入手できます。
npm i pretendardyarn add pretendardPretendardはデバイスにインストールされており、システムフォントとして使用できます。
brew tap homebrew/cask-fonts
brew install font-pretendard # configuration.nix
{
fonts . packages = with pkgs ; [
pretendard
] ;
}yay -S otf-pretendard
yay -S ttf-pretendardnext.jsでローカルフォントを使用してPretendardを使用できます。
import localFont from 'next/font/local'
const pretendard = localFont ( {
src : './fonts/PretendardVariable.woff2' ,
display : 'swap' ,
weight : '45 920' ,
} ) weightオプションを指定しない場合は、WebKitベースのブラウザで厚さが間違っている可能性があるため、注意してください。
インター：ラスマスアンダーソン
ソースハーンサンズ：Adobe、Google、Sandol Communication;チャン・スー・ヨン、カング・ジュ・アイオン
M Plus 1P：Underforest Design;コジ・モリシタ
ギル・ヒンジン
Pretendardは、SILオープンフォントライセンスに配布されます。フォントの販売を除いて、すべての商業行動、修正、および再分配が可能です。
Pretendardプロジェクトをサポートして、それをスムーズにし続けてくれてありがとう。
Pretendardに貢献してくれてありがとう。
@Hiddenest：WebフォントサービングとCDN更新自動化、サブセックスとダイナミックサブセット、可変ダイナミックサブセットオートメーションに取り組んできました。
@leejh10003：Pretendardを使用する例を作成しました。
@black7375：すべてのWebFontビルドオートメーション、NPMJおよびYARN、CDN URLのファイル作成自動化、バズの改善、モノレポ応答、パフォーマンスの向上、Preendard Gov CDNドキュメント。
@victorrica：NPMとYARNパッケージの分布に取り組んできました。
@KMS0219kms：すべてのWebフォントCDN分布多重化、ドキュメント開発の改善、英語と日本のドキュメント。
@gamssake：ビルドオートメーションを改善しました。
@Quiple：日本のreadmeの翻訳を改善しました。
@sudosubin：Homebrew-cask-fontsとnixが追加されました。
新しい改善意見はいつでも大歓迎です。解決策が必要な場合は、問題に問題を登録してください。
