問題 × 解決策

Androidで明朝体のフォントの適用を実現するには?

問題

Androidで明朝体のフォントの適用を実現するには?

解決策

「Google Fonts」を活用してWEBフォント「Noto Serif JP」を適用する。

Androidで明朝体を実現したい!

スマートフォンの中でも、iPhoneは「ヒラギノ明朝」や「游明朝体」を適用してくれますが、Androidではそれが叶いません。
なのでAndroidに明朝体を適用させる手として、「Google Fonts」を活用するやり方をご紹介します。

まず、「Google Fonts」にアクセスします。

以下のサイトにアクセスしてください。

【Google Fonts】
https://fonts.google.com/

画面右上の「Search」に「noto」と入力すると、「Noto Serif JP」というフォントが出てきますので、そちらをクリックします。

右上の「Select this font」をクリックすると、「Deselect this font」と表記が変わります。
そして右下に「Family Selected」と書かれた黒のバーが現れますので、そちらをクリックします。

黒のバーをクリックすると、

  • CSSの読み込みコード
  • WEBフォント設定のためのCSSの記述

の2つが出てきます。
こちらのコードをコピーして、マークアップへと移ります。

マークアップから行います。

  • 先程の①CSSの読み込みコードをheadタグ内に記述します。
  • 次に表示用として、pタグでテキストを入力します。
    便宜上、pタグのクラスを「serif」と設定しています。
<head>
~
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap" rel="stylesheet">
</head>
<body>
~
<p class="serif">Androidで明朝体を表示</p>

CSSの構築

Pタグの「serif」クラスに対して、先ほどの②WEBフォント設定のためのCSSの記述を設定します。

.serif{
	font-family: 'Noto Serif JP', serif;
}

DEMOはこちら

Androidで明朝体を表示

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

19 − sixteen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧