WEBフォントを使って外国語と日本語を共存させる

DEMOはこちら

日本語にない文字を日本語仕様のパソコンなどで表示するためだけでなく、 外国語仕様のパソコンなどから見た日本語が文字化けしないように、表示したい言語に合わせたフォントを指定する。
自分でフォントをゲットしてそれをサーバにアップして…となるとハードルが高いですが、Google Fontsなどのサービスで手軽にフォントを利用させていただけるようになりました。

外国語翻訳版にはcanonicalを

同じ内容の他言語版がある場合は、Google検索に重複コンテンツと判定されないよう、対応するページ毎に以下のlinkタグを入れておく。
内容が重複したページ毎に記述する。(例えばen1.html → jp1.html、en2.html → jp2.htmlなど…)
全部トップページを参照するとかしちゃダメ

例:日本語ページ https://hoge.com/jp1.html を英語に翻訳した(同じ内容の)https://hoge.com/en1.html が存在し、 jp1.html に評価を集約する場合、   en1.html の <head>内に以下を記述する。


<link rel="canonical" href="https://hoge.com/jp1.html">

注:重複判定はされないが en1.html は検索エンジンのインデックスに登録されなくなる。

基本的にはUTF-8でUnicode対応Webフォント(Google Fonts の Noto Fontsとか)を指定しておけば、
ほとんど問題ないと思います。


<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;500&display=swap" rel="stylesheet">

|で区切って複数フォントを読み込む(例:Noto SansとRoboto)
<link href="https://fonts.googleapis.com/css?family=Roboto|Noto+Sans+JP&display=swap" rel="stylesheet">

@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;500&display=swap');

body {
	font-weight: 100;
	font: normal 300 1.6rem/1.8 'Noto Sans JP', sans-serif;
	}

UNICODEフォントの一例としてNoto Fontsを指定したサンプル

ちょっと字体がアレですが、正しく読めるという最低限の課題はクリア。

フォントの指定をしないと特にロシア語、ベトナム語などのアクセント記号に文字化けが見られます。

Noto Fontsを指定したサンプル

(日)むかしむかし、冬のさなかのことでした。
(越)Chuyện xưa kể rằng hồi ấy, khi trời đang ở giữa mùa đông lạnh giá, những bông hoa tuyết y như những chiếc lông chim trắng muốt bay phấp phới khắp bầu trời,
(英)a queen sat sewing at her window, which had a frame of black ebony wood.
(仏)« Si seulement j'avais un enfant aussi blanc que la neige, aussi rose que le sang, aussi noir que le bois de ma fenêtre ! »
(独)dachte sie bei sich: Hätt' ich ein Kind, so weiß wie Schnee, so rot wie Blut und so schwarz wie das Holz an dem Rahmen!
(露) Давай-ка отправимся с тобой на гору и хоть разок да наедимся досыта, пока их не утащила белка.
(シンハラ語) පස්සෙ හම්බ වෙමු

デフォルトフォントのサンプル

(日)むかしむかし、冬のさなかのことでした。
(越)Chuyện xưa kể rằng hồi ấy, khi trời đang ở giữa mùa đông lạnh giá, những bông hoa tuyết y như những chiếc lông chim trắng muốt bay phấp phới khắp bầu trời,
(英)a queen sat sewing at her window, which had a frame of black ebony wood.
(仏)« Si seulement j'avais un enfant aussi blanc que la neige, aussi rose que le sang, aussi noir que le bois de ma fenêtre ! »
(独)dachte sie bei sich: Hätt' ich ein Kind, so weiß wie Schnee, so rot wie Blut und so schwarz wie das Holz an dem Rahmen!
(露) Давай-ка отправимся с тобой на гору и хоть разок да наедимся досыта, пока их не утащила белка.
(シンハラ語) පස්සෙ හම්බ වෙමු

ベトナム語のアクセント記号全部入りサンプル。
アクセント記号を全部入れるための文章なので、意味はハチャメチャです。 Cảm ơn. Nyun-chan♪

それにしても、アクセント記号に関してはベトナム語って最強クラスじゃないか?w

正しく表示した例(画像:ベトナム語フォントで記述)
メイリオで表示(画像:文字化けてます)
Noto Fontsを指定(ほぼ正しい…が、amとかcanとか数か所違う…Uniフォントでも過信はできない…)
Thắng như con hoẵng ế dài ngoằng hẳn mặn ẩn ấm trẫm ân cần ơ hờ hờ chở ở đợ ngỡ ngàng

TOP