縁取り文字はCSSのtext-strokeで可能。(非推奨の時代は終わり。)デザイナー、コーチ、ディレクター / いがわ

.

Memo

CSSの縁取り文字はtext-strokeで可能。

縁取り文字はtext-strokeを使った方が楽で確実。

CSSのtext-stroke。

DTPデザインでは当たり前で、イラレでもフォトショでもごく普通に使われている縁取り文字

文字を縁取りするだけなので簡単そうだが、CSSではなかなか実装されなかった。

そのためWebデザインでは長年シャドウ用の「text-shadow」を駆使して代用していたが、そんな時代がようやく終わった。

2022年6月にIEがサポート終了となったので、「text-stroke」を使えば良くなった。


CSSのtext-strokeは超簡単。

text-shadowの縁取りと、text-strokeの縁取り。

シャドウ用の「text-shadow」でめっちゃ複雑なコード、かつそれでも思い通りに再現できなかった縁取りが、わずか1行で済む。(※ベンダープレフィックスを合わせて2行。)

例)

HTML
<p class="example">文字の縁取り。テキストストローク。ストロークはデザインツールで塗りと線でいう場合の「線」のこと。</p>
CSS
.example {
 font-size: 2.8rem;
 font-weight: bold;
 -webkit-text-stroke: 1px #f15d00;
 text-stroke: 1px #f15d00;
}
ブラウザでの表示。

text-stroke.
テキストストローク。
文字の輪郭を縁取る。
ストロークはデザインツールでいう「線」のこと。

注意点はとしては…

  • 2022年10月現在、ベンダープレフィックスはまだ必要。(ChromeもSafariも。FirefoxとEdgeはプレフィックス不要。)
  • 小さな文字や細かい文字には向かない。縁があるとつぶれてしまう。
  • デザインツールのように、角(コーナー)の処理はできない。
  • 変に使いすぎるとクセになり、意図せずスーパーのチラシのようになってしまう。

文字と背景のバランスが大切。

text-strokeの使用例。

実際に静かで澄んだの山頂上空と、賑やかなネオンのムーラン・ルージュの写真に文字を乗せた例。

文字色は「color」で指定でき、透明も可能。

文字と背景のバランスが大切。

縁取り文字はCSSのtext-strokeで可能。

Photo by Louis Reed

賑やかすぎると、透明な文字色では読みづらい。

文字と背景のバランスが大切。

CSSのtext-strokeで文字を縁取る。

文字色を黒にすると可読性が上がる
(※ダークモード(Dark Reader)では文字色がうまくいかない。2022年10月現在。)

文字と背景のバランスが大切。

CSSのtext-strokeで文字を縁取る。

Photo by Hermann


text-strokeは非推奨なの?

text-stroke」で検索すると、サジェストで「text-stroke 非推奨」と出てきた。

なぜかと思って調べてみたところ、これはかつてのIEでの未対応の他、もしかしたらMDNのサイトも原因かもしれない。

MDNのtext-strokeのページを見てみると、目立つように以下の警告がされている。

縁取り文字はCSSのtext-strokeで可能。
よく見てみると、Safari用のベンダープレフィックスである「-webkit」がついている。(※2022年10月現在、SafariやChromeにはベンダープレフィックスはまだ必要。)

Chromeも当初は「webkit」エンジンだったので、Chromeも同様にプレフィックスが必要だった。

ただし、「ブラウザーの互換性」の項目を見てみると、Safariがバージョン3、Chromeはバージョン4とあり、バージョンがとんでもなく古い。

CSSのtext-strokeで文字を縁取る。

おそらくこれは、10年〜15年くらい前のtext-strokeの情報と思われる。

今では、2022年10月時点では、Safariのバージョンは16であり、Chromeは100を超えている。

なので、このページは特に気にしなくても良い。

(※MDNは無料かつ有益な情報が多い。ただ単にこのページが古いだけ。)

Can I Useのページで確認すると、シェア率を踏まえほとんどのブラウザで対応されている。

縁取り文字はCSSのtext-strokeで可能。

物事の一面だけを見て判断しちゃいけない、という良い例かもしれない。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。