文字の太さをCSSのfont-weight以外にtext-shadowを使ってさらに太くする方法をご紹介します。
CSSのfont-weightでは文字の太さに限界がありますが、text-shadowを使うことで限界を超えた太さにできます。
ただ、やりすぎると文字が読めなくなるのでご注意下さい。
Contents
ディスプレイ広告
文字の太さを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>
文字の太さをfont-weight以外にtext-shadowを使ってさらに太くするデモページ
文字の太さをfont-weight以外にtext-shadowを使ってさらに太くするデモ
※流用される場合は自己責任でお願いします。
ディスプレイ広告
ディスプレイ広告