古いWebブラウザでも表示できる方式です。
HTMLページに縁取り文字を表示するコードを紹介します。
HTMLのページ内に縁取りされた文字を表示したいことがあります。
この記事では、縁取りされた文字を表示するコードを紹介します。
text-shadowプロパティを利用する方法です。ぼかしのない影を元の文字列から各方向にずらして描画することで、縁取りがされている表現を実現します。
8方向にスライドさせて描画する例です。
.BorderShadowLetterStyle {
margin: 0;
font-size: 4rem;
font-weight: 700;
color: #ffbfdc;
text-shadow: 0 2px 0 #c30058, 2px 0 0 #c30058, 0 -2px 0 #c30058, -2px 0 0 #c30058,2px 2px 0 #c30058, -2px 2px 0 #c30058, -2px -2px 0 #c30058, 2px -2px 0 #c30058;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="BorderLetterTextShadow.css"/>
</head>
<body>
<h1>縁取り文字のデモ</h1>
<p class="BorderShadowLetterStyle">縁取り文字です</p>
</body>
</html>
上記のHTMLページをWebブラウザで表示した結果が下図です。
拡大すると、角の部分がややギザギザになっています。これは、元の文字と同じ大きさの文字を8方向にスライドさせているため、
角の部分は完全に縁取りされないことが原因です。
4方向にスライドさせて描画する例です。
.BorderShadowLetterStyle {
margin: 0;
font-size: 4rem;
font-weight: 700;
color: #ffbfdc;
text-shadow: 2px 2px 0 #c30058, -2px 2px 0 #c30058, -2px -2px 0 #c30058, 2px -2px 0 #c30058;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="BorderLetterTextShadow.css"/>
</head>
<body>
<h1>縁取り文字のデモ</h1>
<p class="BorderShadowLetterStyle">縁取り文字です</p>
</body>
</html>
上記のHTMLページをWebブラウザで表示した結果が下図です。
拡大すると、角の部分は途切れています。これは、元の文字と同じ大きさの文字を斜め方向の4方向にスライドさせているため、角の部分は縁取りにならないことが原因です。
先の方法では、縁取りの文字は描画できましたが、角の部分で途切れたり、ギザギザになってしまう問題があります。
.BorderLetterStyleTextStroke {
margin: 0;
font-size: 4rem;
font-weight: 700;
color: #afffee;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #0094ff;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="BorderLetter.css"/>
</head>
<body>
<h1>縁取り文字のデモ</h1>
<p class="BorderLetterStyleTextStroke">縁取り文字です</p>
</body>
</html>
以下のCSSのプロパティにより文字に2pxの縁取りを描画しています。
縁取りの色を、-webkit-text-stroke-color で指定しています。
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #0094ff;
上記のHTMLページをWebブラウザで表示した結果が下図です。
拡大した表示です。角の部分も含めてきれいな縁取りの文字が描画できています。
SVGを利用して内側の文字列と外側の文字列を2つ描画して縁取りの文字列を描画する方法です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>SVGによる縁取り文字のデモ</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="80" viewBox="0 0 600 80" preserveAspectRatio="xMinYMid">
<text x="12" y="50%" dy="0.4em" dominant-baseline="alphabetic" letter-spacing="11" font-weight="bold" font-size="60" font-family="Meiryo" fill="#0b7e51" stroke-width="8" stroke="#0b7e51" stroke-linejoin="round">縁取り文字です</text>
<text x="12" y="50%" dy="0.4em" dominant-baseline="alphabetic" letter-spacing="11" font-weight="bold" font-size="60" font-family="Meiryo" fill="#96df9c" stroke-width="0">縁取り文字です</text>
</svg>
</body>
</html>
以下のコードでsvgのボックスを定義します。
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="80" viewBox="0 0 600 80" preserveAspectRatio="xMinYMid">
</svg>
textタグを2つ記述し文字列を2つ描画します。一方は stroke-width="8" を設定し外側の縁取り文字列を描画します。
もう一方は、stroke-width="0" を設定し内側の文字列を描画します。
<text x="12" y="50%" dy="0.4em" dominant-baseline="alphabetic" letter-spacing="11" font-weight="bold" font-size="60" font-family="Meiryo" fill="#0b7e51" stroke-width="8" stroke="#0b7e51" stroke-linejoin="round">縁取り文字です</text>
<text x="12" y="50%" dy="0.4em" dominant-baseline="alphabetic" letter-spacing="11" font-weight="bold" font-size="60" font-family="Meiryo" fill="#96df9c" stroke-width="0">縁取り文字です</text>
上記のHTMLページをWebブラウザで表示した結果が下図です。
拡大した表示です。角の部分も含めてきれいな縁取りの文字が描画できています。縁取りの角の部分が丸みを帯びている描画結果になります。
