CSSで中国語フォントを表示させる方法【font-familyで簡体字に変換する】

投稿日:2022年10月28日（最終更新日:2023年03月10日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

本記事は執筆時点（2022年10月28日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

CSSで簡体字を表示させる方法

簡体字とは、中国で使われる漢字を簡略化させた文字のことです。

日本のサイトを制作するうえで、簡体字を使う頻度は少ないかもしれません。しかし人の名前などでどうしても表示させなければならない場面があったので、備忘録としてまとめておきます。

簡体字の表示という問題に直面したのは、あるお客様のサイト制作でのこと。

掲載したいテキスト情報を紙媒体で頂いたのですが、そのなかに見慣れない漢字がありました。

表示できなかった文字は、この「直」という字です。

見たことあるような無いような漢字。パッと見、「直」に見えますが「直」ではなさそうです。勉強不足で何と読むかわかりませんでした。

思いつく限りの読み方で変換を試みるも一向にこの字にたどり着けません。

単に自分が知らないだけかと思い、IMEパッドで手書きしてみたものの表示されません。

ネットで調べようにも部首などのとっかかりも見当たらないので行き詰りました。

恥を承知でお客様に教えてもらうしかないとあきらめ半分でしたが、最後にダメもとで「直みたいな字」でGoogleで検索してみました。

すると同じような質問をしている方がいて、この字が「簡体字」であることが判明しました。

（恥ずかしながら簡体字という存在もこの時、詳しくは知りませんでした。）

簡体字ということはわかったので、次はどうやってサイト内で簡体字を表示させるかです。

簡体字であることがわかれば、この方法はすぐに見つかりました。

簡体字はCSSのfont-familyで表示させることができるようです。

簡体字を使用するにはサイトにWebフォントを導入して、font-familyでそのフォントを指定します。

表示させる手順は以下の通りです。

font-familyの使い方についてはこちらのページをご覧ください。

font-family:「フォント名」という形で文字に適用させたいフォントを指定することで閲覧するデバイスに対して指定フォントを表示させるようにできます...【もっと読む】

まずlinkタグを使って、サイトのhead部分などにGoogleフォントを読み込ませます。
Googleフォントのサイトはこちら
https://fonts.google.com/
次にスタイルシートでフォントを指定します。font-familyプロパティに「Noto Sans SC」を指定します。
最後にHTML上で、簡体字に変換させたい文字をspan等のタグで囲い、前述のクラス名を付与すれば完了です。

実際のコードはこちらです。

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosanssc.css">

CSS

.kantaiji{
    font-family:'Noto Sans SC',sans-serif;
}

HTML

<p>この文字「<span class="kantaiji">直</span>」は、簡体字です。<p>

プレビュー

この文字「直」は、簡体字です。

なお、下記のようにスタイルシート内で「@import」を使ってWebフォントを読み込む方法も存在しますが、こちらの方法は現在では非推奨になっているようなのでご注意ください。

CSS

<style>
@import url(https://fonts.googleapis.com/earlyaccess/notosanssc.css);
.kantaiji{
    font-family:'Noto Sans SC',sans-serif;
}
</style>

以上がCSSで中国語フォントを使って簡体字に変換して表示させる方法です。

font-familyは文字の見た目・デザインを変えるものというイメージでしたが、このような使い方・役割もあるのかと気づかされた出来事でした。

ちなみに日本の漢字と簡体字とで書き方が異なるものを調べていくつか試してみましたが、変換できたのはこの「直」だけでした。