問題
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で明朝体を表示
コメント