投稿日：2013年12月26日
更新日：2017年6月6日
目次
デザイナーのmacにはメイリオが。。
ターゲットをweb業界にしたサイトでは、macの中にメイリオが入っているデザイナーさんでも、意図したフォントを表示させたいものです。windowsでは、メイリオで表示させて、macでは、ヒラギノ角ゴで表示させるやりかたです。
もちろん、それ以外、macとwinで表示を変更したいという場合にも利用できます。
やり方
方法としては、ユーザーエージェントをみて、bodyにclassを付与します。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script type="text/javascript"> var agent = navigator.userAgent; if( agent.indexOf("Win") >= 0 ){ $(document).ready(function() { $('body').addClass('fontWin'); }); }else{ if( agent.indexOf("Mac") >= 0 ){ $(document).ready(function() { $('body').addClass('fontMac'); }); }else{ $(document).ready(function() { $('body').addClass('fontOther'); }); } } </script> |
cssはこんな感じで書いておけばいいのではないでしょうか。
|
1 2 3 4 5 6 7 8 9 |
body { color: #333; font-size: 14px; font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; } .fontWin{font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS PGothic',sans-serif !important;} .fontMac{font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif !important;} |
細かい部分ですが、サイトによっては、気にしておきたいところですね。