개인 귀여운 CSS font-family 랭킹 발표

소개



개인적으로 귀엽다고 생각하는 CSS의 font-family의 일본어 랭킹을 발표합니다!
자작의 웹 사이트를 만들기에 있어서 문자를 귀엽게 하고 싶었기 때문에 조사해 보았습니다.

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




    특징: 이쪽이 1위에 빛났습니다! ! 필기로 쓴 것 같은 문자가 느슨하고 귀엽다!
    귀엽고 귀엽지만 조금 맛있는 웹 페이지로 만들고 싶을 때 사용할 수 있습니다

    2위 TsukuARdGothic-Regular





    특징 : 문자의 모퉁이가 없어서 느낌이 특징. 문자에 조금 버릇이 있는 느낌이 귀엽다!
    심플한 느낌의 웹 사이트에 사용할 수 있을 것 같다

    3위 HanziPen SC




    특징 : THE 필기 느낌의 문자입니다. 중학생 때라든가 이런 느낌의 글자를 쓰고 있는 아이가 있었던 것 같은 생각이 듭니다
      필기 바람으로 하고 싶다! ! 라는 웹 사이트에 사용할 수 있을 것 같다

    4위 히라기노 마루고 Pro





    특징 : 어쨌든 문자가 둥글고 뿔은 하나도 존재하지 않습니다!
    팝적인 느낌의 웹 사이트에 사용할 수 있을 것 같다

    5위 Wawati SC





    특징: 조금 버릇이 있는 팝적인 느낌의 문자입니다. 「코」아래 부분의 구부러진 상태의 느낌의 버릇이 귀엽네요!
    이쪽도 팝적인 느낌의 Web 사이트에 사용할 수 있을 것 같다

    ※모두 OS:Mac, 브라우저:Chrome에서는 동작하는 것은 확인되고 있습니다.

    요약



    개인적으로는 둥근 문자를 좋아해서 이런 랭킹이 되었습니다! !
    브라우저나 OS의 차이에 따라서는 읽을 수 없는 가능성도 있습니다만, 귀여운 문자의 참고로 해 보세요!

    참고 사이트

    좋은 웹페이지 즐겨찾기