--- title: 個人的なかわいいCSSのfont-familyランキングを発表 tags: CSS font-family フォント HTML5 初心者 author: nacho0707 slide: false --- ## はじめに 個人的にかわいいと思うCSSのfont-familyの日本語のランキングを発表します! 自作のwebサイトを作るにあたって文字をかわいくしたかったため調べてみました。 ## font-familyとは - フォントを指定するプロパティのこと。 - 指定したフォントはブラウザが動作している環境にインストールされているものが使用されるため、指定したフォントが必ず使用できるとは限らない。 - フォントは複数指定することができる。フォントを複数指定した場合、ユーザ環境に存在するフォントが適用される。その際、前方にあるフォントが優先される。 ## 記述例 ### HTMLファイル ```HTML

ここに文章を表示

``` ### CSSファイル (ファイル名:sample.css) ```CSS .sample { font-family: -apple-system, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", メイリオ, meiryo, sans-serif; } ``` ※Qiitaではこのようなfont-familyが設定されていました。 ## かわいいランキング ### 1位 Hannotate SC ![スクリーンショット 2020-11-18 21.00.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/fe1c0c5d-4fb2-bc48-aadb-a425e9316fc6.png) 特徴:こちらが1位に輝きました!!手書きで書いたかのような文字がゆるくてかわいいです!    かわいくありつつもちょっと味のあるWebページにしたい時に使えそう:point_up_tone1: ### 2位 TsukuARdGothic-Regular ![スクリーンショット 2020-11-18 20.56.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/d916eb9b-4e64-0b82-ba3c-d1b6124dbbd6.png) 特徴:文字の角がなくへにゃって感じが特徴。文字に少し癖のある感じがかわいいです!    シンプルな感じのWebサイトに使えそう:point_up_tone1: ### 3位 HanziPen SC ![スクリーンショット 2020-11-18 21.11.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/9b8d8662-4e12-73be-fc92-025dbb901aae.png) 特徴:THE手書きって感じの文字です。中学生の時とかこんな感じの字を書いている子がいたような気がします:joy:    手書き風にしたい!!というWebサイトに使えそう:point_up_tone1: ### 4位 ヒラギノ丸ゴ Pro ![スクリーンショット 2020-11-18 20.48.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/85db2615-1e3d-085b-0eb5-1e8e2a65b6bd.png) 特徴:とにかく文字が丸っこくて角なんてひとつも存在しません!    ポップな感じのWebサイトに使えそう:point_up_tone1: ### 5位 Wawati SC ![スクリーンショット 2020-11-18 21.18.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/49b069aa-2db9-c5b5-f434-17a156565b2f.png) 特徴:ちょっと癖のあるポップな感じの文字です。「こ」の下の部分の曲がり具合の感じの癖がかわいいですね!   こちらもポップな感じのWebサイトに使えそう:point_up_tone1: ※いずれもOS:Mac、ブラウザ:Chromeでは動作することは確認できています。 ## まとめ 個人的には丸っこい文字が好きなのでこのようなランキングになりました!! ブラウザやOSの違いによっては読み込めない可能性もありますが、かわいい文字の参考にしてみてください! ## 参考サイト https://saruwakakun.com/font-family