文字に枠線つけたらなんか重なってる!
ある日、テキストストロークがついているデザインをElementorで実装してみました。
スタイルタブにあるテキストストロークを使ったところ、なんだか1画1画が重なっているではありませんか!

みなさん、これがなぜ起きるかご存知ですか?
あなたは悪くありません。
悪いのはフォントです。
本当にフォントです。(ダジャレは人間の特権)
ここで使用していたのは「Noto Sans JP」でした。

「Zen Kaku Gothic New」に変更したところ、重ならなくなりました!

ポイント
Variable フォントはテキストストロークが重なってしまう
これ、Variableなフォントに起きる事象です。
以下、欧文のVariableフォント(Roboto / Montserrat / Inter )で試しましたが、アルファベットのところは重なってますね。
(日本語のところが重ならないのはデフォルトフォントが当てはまってるから)



Variableフォントの確認方法
Variableか否かは、Google fontsで確認できます。
ご自身が使いたいフォントを検索すると、フォント名横に「● sytles」か「Variable」と記載されています。
左側の「Technology」から「Variable」をクリックで検索もできます。

まとめ
とりあえずこの事象が起きたら、フォント変えましょう!以上!
本日もお疲れ様でした。

2件のフィードバック
あなたのブログ見ていると、すごく感じます、世界が手に届くように思えること。大感謝! ポジティブなエネルギーありがとう! [url=https://iqvel.com/ja/a/%E3%82%A4%E3%82%BF%E3%83%AA%E3%82%A2/%E3%82%AB-%E3%83%AC%E3%83%83%E3%83%84%E3%82%A9%E3%83%BC%E3%83%8B%E3%82%B3]18世紀美術館[/url] 休み不要のルート — 一押し推薦 早速メモ。