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