CSSにて文字列を縁取りする方法は2種類存在しており、一つはCSS3の「text-stroke」を用いるパターン、もう一つは「text-shadow」を用いるパターンである。
■text-stroke
.outline { -webkit-text-stroke-color: #777; -webkit-text-stroke-width: 1px; }
※省略系で書くと下記の通り。
.outline { -webkit-text-stroke: 1px #777; }
■text-shadow
.outline { text-shadow: -1px -1px #777, 1px -1px #777, -1px 1px #777, 1px 1px #777; }
「text-stroke」は内側に縁取りされ、「text-shadow」は外側に縁取りされる。
また、「text-stroke」を用いると、今現在はwebkit系のブラウザでしか解釈してくれないので注意。
「text-shadow」であればほとんどのブラウザに対応している一方、セリフ体のフォントだと縁と縁の合間に隙間が生まれるため、若干美しさに欠ける。といっても気にならない人であれば全く問題ない。