先日の多言語化対応の「baserCMS サブサイトの多言語設定は、 なかなかにカオス。」記事で、中国語（簡体字）対応ページでフォントファミリーを指定したい場合、当該ページ用のレイアウトファイル内で、以下の様にlang="zh-cmn-Hans"指定し、CSS側で各要素にlang擬似クラス指定をして反映させています。
<html dir="ltr" lang="zh-cmn-Hans">
<head>
<link rel="alternate" hreflang="ja" href="https://hoge.com/">
<link rel="alternate" hreflang="en" href="https://hoge.com/en/">
<link rel="alternate" hreflang="de" href="https://hoge.com/de/">
<link rel="alternate" hreflang="fr" href="https://hoge.com/fr/">
<link rel="alternate" hreflang="zh-cmn-Hans" href="https://hoge.com/zh/">
<link rel="alternate" hreflang="x-default" href="https://hoge.com/">
</head>
CSS側で各要素にlang擬似クラス指定をして記述。
ちなみにinput要素、textarea要素やらは、body要素の内容が反映されないので、個別に指定する必要があります。
/* サンセリフ体の場合 */
body:lang(zh-cmn-Hans),
input:lang(zh-cmn-Hans),
textarea:lang(zh-cmn-Hans),
select:lang(zh-cmn-Hans),
button:lang(zh-cmn-Hans) {
font-family: 'Noto Sans SC','SF Pro SC','SF Pro Text','SF Pro Icons','PingFang SC','Helvetica Neue','Helvetica','Arial',sans-serif;
}
/* セリフ体の場合 */
body:lang(zh-cmn-Hans) {
font-family: 'Noto Serif SC','SF Pro Icons', 'Kaiti SC', 'SimSun', serif;
}
↧