Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8807

WEBにおける言語表示・フォントセレクトの例示

$
0
0

Life is Tech! メンバーアドカレ 12/13です!!!今回3記事目だよ!みんな書いて!

みなさんは日本語以外でサービスを提供することはあるでしょうか?
世界にはいろいろな言語があり,エスノローグ(SILという団体の作っているオンライン及び書籍の言語目録)では6,800の言語があるとされています.
例えば日本語では日本語/日本手話/アイヌ語のほか通常では琉球方言(琉球語)に分類される{喜界語/北奄美大島語/南奄美大島語/徳之島語/沖永良部語/与論語/国頭語/中央沖縄語/宮古語/八重山語/与那国語}が言語として挙げられています.
私の場合筆記したり電子で表記したりした経験があるのは英語ほかラテン言語(英,仏,独やマレー語など),中国語(簡・繁・香港),ヒンディー語,ギリシャ語,ロシア語,クメール語(カンボジア),タイ語,アラビア語などメジャー言語からマイナー言語までいろいろ使ったことがあります.
この記事では世界中の様々な言語を表示するうえでどんなようにフォントを設定すればよいのかをお伝えします.また同時に,WEBフォントの表示について海外を気にするとどうしないといけないのかとかも書いておきます.

まず第一に

たいていの言語の表示には,sans-serifって書いておけば大丈夫です.要するにゴシック体やサンセリフ,それに近いフォントで表示しろっていう指示です.
日本語の場合はMSゴシック,メイリオ,ヒラギノ角ゴシック,Osaka,Noto Sans JPおよびその他各端末・ブラウザの標準ゴシック体が表示されます.私のMacの場合はヒラギノ角ゴシックです.また,英語やギリシャ語ではSanFrancisco(Mac), Roboto(Android), Segoe UI, Arial(Windows), Inter, Samsung Sans(一部の端末)あたりが適用されます.中国語でも苹方, ヒラギノ角ゴシック簡体中文(Mac), YaHeiやHeiti(Windows), Noto Sans SC/TC/HK(Android)がそれぞれの文字に適した形で,韓国語でもApple Gothicあたりが,表示されます.これについては書き続けるだけで一年かかると思うのでOSとかの仕様書をご確認ください.

CSSおよびWEBフォントをつかった言語表示について,気にしておかないといけないこと:国家規制

WEBフォントをつかうとなって最初に思い浮かぶのはどこでしょう?おそらくこの記事を読む人で答えれる人の答えは90%以上Google Fontsだと思います.Adobe Fontsって言ったやつは深く反省するか中国国内からのご利用なのでしょう.
閑話休題,中国では国家規制の都合上Googleの各種サービスが使えません.これはGoogleの検索結果とかに検閲をかけられないからなのですが,googleと名の付くものほぼすべてが使えません.使えるのはAndroid OS(ストアなし)くらいです.そのため,普通にGoogle Fontsを使うだけではいけません.
これについては,中国本土向けにサービスを展開するときはcssの@font-faceを使って自分のサーバーから配信してください.
また,表示する文字について国家規制を設けている場合があります.中国の場合はGB(国家基準)というのがあって,通過した文字しか商品パッケージなどに使えないことになっています.詳細は台湾ダイナコムウェア社(センター試験とかのフォント作ってる会社です)のサイトに詳しく乗ってるので見てください.国によってはこういう規制があることもあるので,そのあたりを上手に調整して使用せねばなりません.

問題を回避する一番の方法は,上に書いておいた「sans-serif」を使う,「@font-face」を使う,また「他社(Adobe Fonts, Typesquare, Fontplus, DFOなど)」を使うの3パターンがあります.要するにGoogleの規制を回避して国家基準に適した文字を持ってるフォント会社と契約しろってことです.

font-familyの最適解

では本題,@font-familyをいい感じに設定する方法をご案内します.
まず,参考になるのはAndroidデベロッパーかと思います.WhatfontというツールでCSSから使用されているフォントを取り出したところ次のようになりました.

{font-face:Roboto,"Noto Sans","Noto Sans JP","Noto Sans KR","Noto Naskh Arabic","Noto Sans Thai","Noto Sans Hebrew","Noto Sans Bengali",sans-serif;}

GoogleとAdobeが共同開発したNoto Sansシリーズを多言語では適用してます.Noto Sansというのはこの世のほぼすべての言語を表示できるようにしようという試みです.ここにあるすべてのフォントはここに載っています.というかここのサイトはほぼすべての言語のフォントが1つは載っています.

ローマ字,ギリシャ文字にRobotoおよびNoto Sans(これにはRobotoにない文字を補う機能がある),CJ(日中 これに韓国語を合わせてCJKといいます.)にNoto Sans JPを,韓国語にNoto Sans KRを,アラビア語にNoto Naskh Arabic(ナスフ体はゴシック体みたいなモダンな書体)を,タイ語にNoto Sans Thaiを,ヘブライ語にNoto Sans Hebrew,ベンガル語(インド方面)にNoto Sans Bengaliを適用しています.

Google社のドキュメントとしては珍しく完全WEBフォント化されているのですが,これがおそらく最適解かと思います.たしかOSS版Androidもほぼ同じ構成(ただし中国語は言語設定によって切り替えがあります)でした.また,クメール語などマイナー言語はNoto Sansシリーズではでているものの,Androidデベロッパーが作られるほどメジャー言語ではないので妥当なところだと思います.

ではマイナー言語の場合はどうしたらよいのでしょうか?

私の思う最適解はやはりsans-serifだと思います.正直そこまでフォントを気にすることはないからです.最近のWindowsは全言語対応したおかげでほぼすべての言語が表示できますし,sans-serifだと象形文字であってもUnicodeでは定義されているのでArial Unicode MSというフォント(PCのYouTubeの字幕フォントです)で表示されるでしょう.

でも独自のフォントを(ry)

じゃあかしい!自分で探せや!が本音なのですが,まあ一応教えておこうと思います.
まず,上記した https://www.google.com/get/noto/には基本的に全言語のフォントが載っています.これを使うのがいいでしょう.
また,それ以外で気になる言語がある場合は僕の団体に聞く(https://twitter.com/nilnil)とか,フォント会社の見本帳を見るとかしてください.

そして,お金があるならSST Fontというのがあります.SonyとMonotypeが作ったフォントです.多分Noto Sansにつぐ75言語近くが用意されています.それも使ってみるといいでしょう.

以上です!


Viewing all articles
Browse latest Browse all 8807

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>