…これは Webkit 系ブラウザならば、簡単に作ることができます。スタイルシートはこんな感じ。
.outlined{
font-size: 200px;
-webkit-text-stroke-width: 7px;
-webkit-text-stroke-color: #dbab54;
-webkit-text-fill-color: #000;
}
font-size: 200px;
-webkit-text-stroke-width: 7px;
-webkit-text-stroke-color: #dbab54;
-webkit-text-fill-color: #000;
}
- -webkit-text-stroke-width は縁取りの幅を指定します。
- -webkit-text-stroke-color は縁取りの色を指定します。
- -webkit-text-fill-color は内側の色を指定します。
- フォントをサンセリフ系にする。iPhone や Mac ならば Helvetica がお勧め。
- 行間を詰める。
- 文字間を詰める。
- 上下に潰し気味にする。
.outlined{
font-size: 200px;
font-family: 'Helvetica' , sans-serif;
line-height: 0.75em;
letter-spacing: -0.1em;
-webkit-transform-origin: 50% 0;
-webkit-transform: scaleY( 0.6 );
-webkit-text-stroke-width: 5px;
-webkit-text-stroke-color: #dbab54;
-webkit-text-fill-color: #000;
}
これでスターウォーズのタイトル風の縁取り文字が完成です。font-size: 200px;
font-family: 'Helvetica' , sans-serif;
line-height: 0.75em;
letter-spacing: -0.1em;
-webkit-transform-origin: 50% 0;
-webkit-transform: scaleY( 0.6 );
-webkit-text-stroke-width: 5px;
-webkit-text-stroke-color: #dbab54;
-webkit-text-fill-color: #000;
}
"-webkit" と接頭辞が付いていることからも分かるように、このスタイルは Safari や Chrome などでしか効きません。Firefox などで文字の縁取りを実現したいならば、text-shadow プロパティを使って誤摩化すという手法が一般的。
参考記事は → css テキストストローク - CSSPRO
などなど。
コメント