[Javascript] ブラウザ間で font-familyの指定に困ってる方へ
篠原 隆司
アフィリエイト広告を利用しています
このページの内容が役に立ったら X (旧twitter) でフォローして頂けると励みになります
挨拶や報告は無しで大丈夫です
cssでやりたいところだけど、上手い方法がない。
ってことで作ってみました。
えと、なぜこんなものを作ったか説明から入りましょうか?
不要ですか?
じゃぁ・・・
えと、まー一言で言うと、
どんな環境でもどんなブラウザでも意図した通りのフォントで表示させる方法がない
ってところですかな。
これ以上の説明は、Googleで、『css font-family 指定』と検索して頂ければと思います。
で、コードですが、たいしたことしてないです。
クロスブラウザと言ってますが、ホントたいしたことないです。
/*
* ●こぴーらいと @2009
* 作成者 : aulta
* 配布元 : https://aulta.co.jp/
* ツイッター : @aulta : http://twitter.com/aulta/
* 改変、再配布などは自由です。
*/
window.aulta = {
// ゴシック
fontFamilyGothic : function(){
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('opera/') > -1){ // opera
return "'MS Pゴシック','MS PGothic''メイリオ','Mayryo',,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;";
} else if (ua.indexOf('safari/') > -1){ // safari
return "'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Mayryo','MS Pゴシック','MS PGothic',sans-serif;";
} else if (ua.indexOf('gecko/') > -1){ // gecko, firefox
return "'MS Pゴシック','MS PGothic''メイリオ','Mayryo',,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;";
} else { // ie?
return "'メイリオ','Mayryo','MS Pゴシック','MS PGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;";
}
}
, // 明朝
fontFamilyMincho : function(){
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('opera/') > -1){ // opera
return "'MS P明朝','MS PMincho','ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',serif;";
} else if (ua.indexOf('safari/') > -1){ // safari
return "'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','MS P明朝','MS PMincho',serif;";
} else if (ua.indexOf('gecko/') > -1){ // gecko, firefox
return "'MS P明朝','MS PMincho','ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',serif;";
} else { // ie?
return "'MS P明朝','MS PMincho','ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',serif;";
}
}
}
// jQueryでbodyタグに「ゴシック系」をセット
jQuery('body').css('font-family', aulta.fontFamilyGothic());
// jQueryでbody内のh1タグに「明朝系」をセット
jQuery('body h1').css('font-family', aulta.fontFamilyMincho());
// 素のjavascriptでbodyタグに「ゴシック系」をセット
var body = document.getElementsByTagName('body')[0];
body.style.fontFamily = aulta.fontFamilyGothic();
こんな感じです。
ユーザーエージェントで、ブラウザごとに指定したい「font-family」の値を返しているだけです。
順番が気に入らない方は、ご自由に並び替えてください。
どこを変えればよいかはそんなに難しくないと思います。
ゴシック系と明朝系を用意しています。
なんか・・・ホント期待して読んでくださった方に申し訳ないです。
コードとしてはこれだけなんです。