font-synthesis「太字や斜体を持たないフォントの表示方法」

<style type="text/css">
.common div{
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  font-family   : "メイリオ", sans-serif;
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_font{
  font-family   : "MS ゴシック";
  font-style: italic;
  font-weight: bold;
}
.css_none{ font-synthesis :  none;}
.css_weight{ font-synthesis :  weight;}
.css_style{ font-synthesis :  style;}
.css_weight_style{ font-synthesis :  weight style;}

<!-- html -->
<div class="common">
  <div class="cssTitle">font-synthesis なし</div>
  <div class="css_font">
  <span>italic、bold で表示</span>
  </div>
  <div class="cssTitle">font-synthesis: none;</div>
  <div class="css_font">
  <span class="css_none">italic、boldの指定を無視して、通常のフォントで表示</span>
  </div>
  <div class="cssTitle">font-synthesis: weight;</div>
  <div class="css_font">
  <span class="css_weight">weight のみ指定のため、italicの指定を無視して、boldで表示</span>
  </div>
  <div class="cssTitle">font-synthesis: style;</div>
  <div class="css_font">
  <span class="css_style">style のみ指定のため、boldの指定を無視して、italicで表示</span>
  </div>
  <div class="cssTitle">font-synthesis: weight style;</div>
  <div class="css_font">
  <span class="css_weight_style">weight、style両方指定のため、bold、italicで表示</span>
  </div>
</div>