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

文字の太さをCSSのfont-weight以外にtext-shadowを使ってさらに太くする方法をご紹介します。
CSSのfont-weightでは文字の太さに限界がありますが、text-shadowを使うことで限界を超えた太さにできます。
ただ、やりすぎると文字が読めなくなるのでご注意下さい。

Contents

文字の太さをfont-weight以外にtext-shadowを使ってさらに太くするCSSの記述
文字の太さをfont-weight以外にtext-shadowを使ってさらに太くするHTMLの記述
文字の太さをfont-weight以外にtext-shadowを使ってさらに太くするデモページ

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

※テキストエリア「.txt3」「.txt4」「.txt5」ではtext-shadowを指定し文字に影をつけて太く見せてます。必要に応じて書き換えてください。

<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>

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

※text-shadowを指定し文字に影をつけて太くするテキストエリア「.txt3」「.txt4」「.txt5」を用意します。必要に応じて変更して下さい。

<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>