7月
21
2013

Bootstrapで見出しタグ内の半角スペースが!になったり日本語が消失する時の対策。

Bootstrap
レスポンシブなサイトを比較的簡単に作れるBootstrapですが、Google Chromeでみると見出しタグ内の半角スペースが「!」になったり、日本語が消失したり文字化けしたりするようです。



 
調べたみたところ、Bootstrapの見出しタグ(h1~h6)部分のCSSに以下(ハイライト部分のtext-renderingプロパティ)の指定がされているのが原因と判明。

h1,h2,h3,h4,h5,h6 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
  line-height: 20px;
  color: inherit;
  text-rendering: optimizelegibility;
}

 
 
該当箇所を下記のように指定してあげればなおる模様。

text-rendering: auto;

 

【参考サイト】
》B.log – windowsXP + chrome + ! (エクスクラメーション・マーク/感嘆符) + 半角スペース
》terkel.jp – text-rendering: optimizeLegibility



 


2024年10月
 123456
78910111213
14151617181920
21222324252627
28293031  

Archives

Recommended