今回使用したフリーフォントはAlibabaのアイコンフォントで商用利用は無料ですので、早速今日のチュートリアルを始めましょう。
1.iconfont公式サイトを開く
2. 要件を満たすフォントを選択し、フォント パッケージをダウンロードします。
3. 使用方法
1.解凍してプロジェクトのアセット内にフォントフォルダーを作成し、そのフォントフォルダーに解凍パッケージで使用したいフォントを入れます
例: 私が選んだフォントはAlibaba_PuHuiTi_2.0_55_Regular_55_Regular
2. font.css ファイルを作成してインポートします。
font-family は使用するフォント名に対応します
@font-face {
font-family: "Alibaba_PuHuiTi_2.0_55_Regular_55_Regular";
src: url('./Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf');
font-weight: normal;
font-style: normal;
}
3.App.vueを入力します
ルート ラベル アプリの場合、プロジェクト全体でこのフォントが使用されることを意味します
#app {
font-family: "Source_Han_Serif_CN_VF_Regular";
}
4. 実践検証
わかりました、気楽にやってください。