HOME > 開発者向けBLOG > Webデザイン >  androidで日本語文字を太文字で表示

Technology Note 開発者向けBLOG

Webデザイン

androidで日本語文字を太文字で表示

こんにちは、ゼノフィ渡部です。

androidで日本語文字を太文字で表示する方法をご紹介いたします。

環境にもよりますが、基本的にandroidでは「font-weight: bold;」などを指定しても、日本語文字は太文字にはなりません。太文字に見せる方法はいくつかありますが、ここでは「text-shadow」を用いた方法をご紹介いたします。

3行目は「text-shadow」を指定、8行目は「font-weight: bold;」を指定しています。

1
2
3
4
5
6
7
8
9
10

.shadow {
  font-size: 50px;
  text-shadow: 2px 0 2px #333;
}
 
.bold {
  color: #333;
  font-weight: bold;
  font-size: 50px;
}

HTMLは下記の様にandroidで日本語文字が太文字のように見える例とそうでない例を記述いたしました。

1
2
3
4
5
6
7
8
9

<!-- 日本語文字が太文字のように見える -->
<p class="shadow">
   「text-shadow」でandroidの時、日本語文字が太文字のように表示されていると思います。
</p>
 
<!-- 日本語文字が太文字に見えない -->
<p class="bold">
    「font-weight」ではandroidで日本語文字が太文字になっていないと思います。
</p>

androidでサンプルを見ると「text-shadow」で指定したテキストは日本語文字が太文字のように見えると思います。これは「text-shadow: 2px 0 2px #333;」の「2px 0 2px　#333;」で、最初の2pxで横方向のずれ、2番目の2pxでぼかし具合、「#333」で影の色を調整し、太文字のように見せています。

text-shadowの値で太文字具合を微調整できるので、手間をあまりかけず、androidで日本語文字を太文字に見せるひとつの方法になるのではないでしょうか。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10

.shadow {
  font-size: 50px;
  text-shadow: 2px 0 2px #333;
}
 
.bold {
  color: #333;
  font-weight: bold;
  font-size: 50px;
}

HTML

1
2
3
4
5
6
7
8
9

<!-- 日本語文字が太文字のように見える -->
<p class="shadow">
   「text-shadow」でandroidの時、日本語文字が太文字のように表示されていると思います。
</p>
 
<!-- 日本語文字が太文字に見えない -->
<p class="bold">
    「font-weight」ではandroidで日本語文字が太文字になっていないと思います。
</p>

<

>

PAGETOP