A Web Design Community curated by Chris Coyier.

Adding Stroke to Web Text - CSS-TricksにおいてCSSを使ってブラウザに表示するフォントを中抜きフォントにする方法が紹介されている。紹介されている基本的なテクニックは-webkit-text-strokeを使うというもの。-webkit-text-strokeを指定するとフォントの周りをなぞるように線がひかれる。フォントそのものの色を背景色と同じ色に設定し、-webkit-text-strokeでフォントの周りをなぞるようにすれば、フォントの中抜きを実現できる。

-webkit-text-strokeはWebKit特有の機能で、ChromeやSafari以外のブラウザでは利用できない。Adding Stroke to Web Textではこれに対処する方法として、text-shadowを使って模擬的にフォントの中抜きを実現する方法を紹介している。text-shadowで上下左右に向かってそれぞれ影を付け、フォントそのものの色は背景色と同じものにしておく。こうすることで模擬的に中抜きフォントのように見えるようになる。次にAdding Stroke to Web Textで紹介されているテクニックを試しやすく1つのHTMLファイルにまとめたものを掲載する。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Text Strokeデモ</title>
  <style type="text/css">
  * {
    font-weight: bold;
    font-size: 130%;
  }
  #stroke1 {
    -webkit-text-stroke: 1px black;
  }
  #stroke2 {
    -webkit-text-fill-color: gray;
    -webkit-text-stroke: 1px black;
  }
  #fake {
    color: gray;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  }
  #mixed {
    -webkit-text-stroke: 1px black;
    color: gray;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  }
  </style>
</head>
<body>
  <p>MYCOM Journal マイコミジャーナル</p>
  <p id="stroke1">MYCOM Journal マイコミジャーナル</p>
  <p id="stroke2">MYCOM Journal マイコミジャーナル</p>
  <p id="fake">MYCOM Journal マイコミジャーナル</p>
  <p id="mixed">MYCOM Journal マイコミジャーナル</p>
</body>
</html>

IE9 Beta - テキストシャドーを使ったフェイクのストロークも機能していない

Firefox 4 beta 6 - テキストシャドーを使ったフェイクのストロークが機能している

Chrome 7開発版 - ストローク、テキストシャドーを使ったフェイクのストロークの双方が機能している

Opera 10.70開発版 - テキストシャドーを使ったフェイクのストロークが機能している

Safari 5 - ストローク、テキストシャドーを使ったフェイクのストロークの双方が機能している

text-shadowをつかった方法では、四隅の部分が切れたような表示になってしまうことがある。ただし、手軽に中抜きフォントを実現する方法としてはリーズナブルな方法といえる。IEはtext-shadowをサポートしていないため、text-shadowを使ったテクニックであっても中抜きフォントを実現することができない。ただし、IE9は最終的にtext-shadowをサポートするとみられるため、このテクニックが利用できるようになると考えられる。