多言語化対応で中国語（簡体字）フォントを指定する場合

2022/01/28 web

画像の説明先日の多言語化対応の「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;
}

多言語化対応で中国語（簡体字）フォントを指定する場合

コメント

Related posts