Help us understand the problem. What is going on with this article?

個人的なかわいいCSSのfont-familyランキングを発表

はじめに

個人的にかわいいと思うCSSのfont-familyの日本語のランキングを発表します!
自作のwebサイトを作るにあたって文字をかわいくしたかったため調べてみました。

font-familyとは

  • フォントを指定するプロパティのこと。
  • 指定したフォントはブラウザが動作している環境にインストールされているものが使用されるため、指定したフォントが必ず使用できるとは限らない。
  • フォントは複数指定することができる。フォントを複数指定した場合、ユーザ環境に存在するフォントが適用される。その際、前方にあるフォントが優先される。

記述例

HTMLファイル

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <p class="sample">ここに文章を表示</p>
  </body>
</html>

CSSファイル (ファイル名:sample.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
特徴:こちらが1位に輝きました!!手書きで書いたかのような文字がゆるくてかわいいです!
   かわいくありつつもちょっと味のあるWebページにしたい時に使えそう:point_up_tone1:

2位 TsukuARdGothic-Regular

スクリーンショット 2020-11-18 20.56.29.png

特徴:文字の角がなくへにゃって感じが特徴。文字に少し癖のある感じがかわいいです!
   シンプルな感じのWebサイトに使えそう:point_up_tone1:

3位 HanziPen SC

スクリーンショット 2020-11-18 21.11.22.png
特徴:THE手書きって感じの文字です。中学生の時とかこんな感じの字を書いている子がいたような気がします:joy:
   手書き風にしたい!!というWebサイトに使えそう:point_up_tone1:

4位 ヒラギノ丸ゴ Pro

スクリーンショット 2020-11-18 20.48.16.png

特徴:とにかく文字が丸っこくて角なんてひとつも存在しません!
   ポップな感じのWebサイトに使えそう:point_up_tone1:

5位 Wawati SC

スクリーンショット 2020-11-18 21.18.38.png

特徴:ちょっと癖のあるポップな感じの文字です。「こ」の下の部分の曲がり具合の感じの癖がかわいいですね!
  こちらもポップな感じのWebサイトに使えそう:point_up_tone1:

※いずれもOS:Mac、ブラウザ:Chromeでは動作することは確認できています。

まとめ

個人的には丸っこい文字が好きなのでこのようなランキングになりました!!
ブラウザやOSの違いによっては読み込めない可能性もありますが、かわいい文字の参考にしてみてください!

参考サイト

https://saruwakakun.com/font-family

nacho0707
文系出身の社会人2年目のSEです。
ari-group
Biz&Tech&Creative 三位一体型でサービス企画、UIデザイン、アプリ開発からクラウド基盤や音声基盤の構築、BIやRPAなどのソリューション導入、各種保守運用までをワンストップで提供するITコンサルティングとクラウドインテグレーションをやっている会社です。渋谷、大阪、名古屋の国内3拠点体制で、FAQチャットボットなど自社サービスも展開しています。仲間を絶賛募集中です。
https://ari-jp.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away