問題
Webフォント「Noto Sans JP」のテキストに「-webkit-text-stroke」で縁取りを付けていたが、ある日突然、文字の内側にも線が付くようになるフォント崩れが起こった。
フォントが崩れる前
以前は、文字の外側にのみ縁取りが表示されていた。
フォントが崩れた後
いつの間にか、文字の内側にも線が表示されるようになっていた。
解決策
「Noto Sans JP」の代わりに、以下のフォントを指定した。
- 英数字の部分：「Noto Sans」
- 日本語の部分：「Zen Kaku Gothic New」
日本語対応のない「Noto Sans」を日本語が含まれている要素に対して指定した場合、日本語部分はデフォルトのフォントになってしまうので注意が必要。
今回は、日本語部分がデフォルトのフォントになってしまわないように、形が似ている別のフォントを指定した。
修正後
縁取りが文字の外側にのみ表示されるようになった。
原因
何も変えていないのに突然フォントが崩れたため、原因は不明。
原因を知っている方がいましたら、教えてください。