文字の太さをfont-weight以外にtext-shadowを使ってさらに太くする方法

文字の太さをfont-weight以外にtext-shadowを使ってさらに太くする方法

CSSのfont-weightでは文字の太さに限界があります。
それをtext-shadowを使うと限界を超えた太さにできます。
やりすぎると文字が読めなくなるのでご注意下さい。

文字をtext-shadowで太くしたCSSの記述

※必要に応じて書き換えてください。

<style>
body{
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  padding: 0;
  margin: 0;
  font-size: 24px;
  text-align: center;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  font-size: 24px;
}
.txt1{
  font-weight: normal;
}
.txt2{
  font-weight: bold;
}
.txt3{
  font-weight: normal;
  text-shadow:.5px .5px #000,-.5px .5px #000,-.5px -.5px #000,.5px -.5px #000,.5px 0px #000,0px .5px #000,-.5px 0px #000,0px -.5px #000;
}
.txt4{
  font-weight: normal;
  text-shadow:1px 1px #000,-1px 1px #000,-1px -1px #000,1px -1px #000,1px 0px #000,0px 1px #000,-1px 0px #000,0px -1px #000;
}
.txt5{
  font-weight: bold;
  text-shadow:1px 1px #000,-1px 1px #000,-1px -1px #000,1px -1px #000,1px 0px #000,0px 1px #000,-1px 0px #000,0px -1px #000;
}
</style>

HTML記述

<h1>文字の太さをfont-weight以外にtext-shadowを使ってさらに太くしてます。<br>フォントの種類は「游明朝(Yu Mincho)」</h1>
      <br>
      <br>
      <div class="txt1">文字の太さは「font-weight: normal;」です。</div>
      <br>
      <br>
      <div class="txt2">文字の太さは「font-weight: bold;」です。</div>
      <br>
      <br>
      <div class="txt3">文字の太さは「font-weight: normal;」にtext-shadowでアウトライン0.5pxを指定してます。</div>
      <br>
      <br>
      <div class="txt4">文字の太さは「font-weight: normal;」にtext-shadowでアウトライン1pxを指定してます。</div>
      <br>
      <br>
      <div class="txt5">文字の太さは「font-weight: bold;」にtext-shadowでアウトライン1pxを指定してます。</div>

デモページ

文字の太さをfont-weight以外にtext-shadowを使ってさらに太くするデモ

 

※流用される場合は自己責任でお願いします。
 タグ内のGoogleアナリティクスタグは流用しないで下さい。