クローンコードfont awsome、降雪

素晴らしい番組が始まって最初に迎えた週末
本当に一日中横になって休みたいのですが、平日の残りのことはいつも目の前に浮かんでいます.
ノートを持ってカフェに向かいます.済州島の長所は海を見て勉強できることです!
(郭池海水浴場の前で勉強している人が私です.🤣)

今日、先週行われた済州(チェジュ)符号化キャンプのホームページにcssが適用された.
リンクテキスト
ここで出会った困難を整理したいです.
授業でfontawome、シヌ、グーグルフォントを習いました.
いろいろなフォントやアイコンを見つけることができて、とても便利です.
そこで止めるべきではなかったことを反省します.
これらのサイトの使用は難しい.
https://fontawesome.com/
https://noonnu.cc/
https://fonts.google.com/
授業中はそのまま彼を行かせてはいけない.
今度は必ず時間通りに実習して、聞いてみます.

1.font awsomeの使い方

私が作るページの上部にはこのようなアイコンがあります.

このアイコンはfont awsomeのhomeアイコンです.
これを使うためにコードをコピーするだけでいいと思っていましたが、別の使い方がありました.

<フォントサムネイルの使い方>

FontaSomeを使う方法は
1)cdnの使い方
2)フォントアイコンをダウンロードしてサーバにインストールする方法があります.
2日以降に更新すると再ダウンロードが必要なので、主にcdnを使用します.

<私が使っている方法>

もしあなたがFontaSomeをよく使うなら、会員に入ることをお勧めします.
会員登録したらcdnを教えてください.

<script src="https://kit.fontawesome.com/51js" crossorigin="anonymous"></script>

このように個別のコードをheadに置くとfontarsumのフォントとアイコンが使用できます.

<必要なアイコンを適用>

このようにして欲しいアイコンを探します.
だから上のコードを欲しいところに置けばいいです.

 <section class="home">
            <a href="./exmaple1.html" class="home-btn">
                <i class="fas fa-home"></i>
            </a>
        </section>

.fa-home::before {
    content: "\f015";

このように入れると、希望のアイコンが使えます.
📍デフォルトでは、フォントSomeのアイコンはフォントとして認識されているので、imgファイルのように縦横幅や代替テキストを使用しないので便利です.
リンクテキスト

2.アイマスクの使い方

今上にアイコンを置くと、フォントが新しいタスクになります.
今回作ったページのフォントはこんな感じです.

フォントが気に入りました.
これを知っていればたくさんのフォントが使えるはずです
Fontの名前はCookieRunです.
調べてみると、シヌラがサイトに入ってみて、これは別の方法を使わなければなりません.

＜雪時計の使い方＞

雪努のフォントはネットフォントが使えるので、もっと簡単です.
雪蚕で欲しい書体を探しています.
それからウェブフォントで使用するコードをコピーして、私のcssの中に置いておけばいいです.

@font-face {
    font-family: 'CookieRunOTF-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/CookieRunOTF-Bold00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

これにより、このフォントを私のサイトにロードできます.

<必要なフォントを適用>

私はフォントを呼んで、今私のほしいところに適用することができます.
Cookie Runfontをタイトルに適用したいので、タイトルに適用しました.

h1 {
    font-size: 60px;
    text-align: center;
    font-family: 'CookieRunOTF-Bold';
}

font-家の名前に相応のフォント名を書けばいいので、簡単に載せることができます!
Googleフォントも同様に使用できます.
Google fontは@importでもlinkでも構いません.
いろいろ使えます!!
忙しい毎日を送っていますが、
しかし、一日を过ぎて、少なくとも1つの新しい学会があって、楽しい一日です.
この心を忘れないで、5日目の本当の3ヶ月を残しています😁