とあるはりをの平凡日誌 (PC LIFE) このページをアンテナに追加 RSSフィード




☢Caution!!☢
この日記はバカな私(はりを)が何かを忘れない為に、バカの一つ覚えの如く色んな記事を投稿しています。…が、
あくまでもただの備忘録のひと握りに過ぎず、情報の信憑性や真偽までは保証していません。
極力正しい情報をまとめているつもりですが、万一誤った記事の内容を実行しトラブル等が発生しても
当方は如何なる責任を負いません。自己責任でご利用ください。

以上に同意する方のみ、この雑記帳の閲覧をお願いします。

初めての方はこちらも併せてお読みください。当ブログについて (About)


申し訳ありませんが、使用しているブログシステムの仕様上、基本的に記事へのコメントはできません。(詳しくはAbout参照)
記事への誤字訂正、指摘、情報提供等、何かありましたらチャットに書き置きでもしといてください。

※IEをお使いの方へ※
IEではサイドバーが左側に表示され、記事が隠れてしまう場合があります。(IEとテンプレートの両方のバグです)
「F12 開発者ツール」を開き、ドキュメントモードを「Quirks」にすることで解消されます。

※当ブログが正しく表示されない方へ※
URLスキームがSSL(https://)の場合、正しく表示されません。
お手数ですが、http://に書き換えてアクセスしてください。


ブログ移転のお知らせ
当ブログ「とあるはりをの平凡日誌」は2013年12月6日をもって終了し、
同7日に「はりをきば」と改めはてなブログにスタイリッシュ移転しました。
詳しくはこちら

新しいブログは http://blog.gutyan.jp/ になります。

今までありがとごぜますた。そしてこれからも宜しくお願いしマッスル。m(_ _)m

2013年 7月 27日(土)オペラたんマジオペラ

【CSS】Operaでフォント指定が効かないのを何とかし隊

【CSS】Operaでフォント指定が効かないのを何とかし隊 - とあるはりをの平凡日誌 (PC LIFE) を含むブックマーク はてなブックマーク - 【CSS】Operaでフォント指定が効かないのを何とかし隊 - とあるはりをの平凡日誌 (PC LIFE) 【CSS】Operaでフォント指定が効かないのを何とかし隊 - とあるはりをの平凡日誌 (PC LIFE) のブックマークコメント

CSSは以下のようにフォント名を ,(カンマ) で区切ることで複数のフォントを指定することができる。

優先度順に左から記述し、使用できない場合は右のフォントを~ってやつ。


この仕様を利用し、英数字のみのフォントを左に持ってくることで

英数字部分とそれ以外の部分に異なるフォントを適用させることができる。

* {
	font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Arial", "メイリオ", sans-serif;
}

(順番の書き方は色々あるが、私はこうしてる。)

(WinでヒラギノやHelvetica入れてる奴なんて知るかボケ。逆もまた然り)


実際にこのブログでも、英数字はArial(MacならHelvetica)、それ以外はメイリオ(Macならヒラギノ角ゴ Pro W3)で表示するようにしてる。

(↑のようなコード部分はMeiryoKe_Gothic)

f:id:HARINEZUMI:20130728070253p:image



Operaではそうはいかない。

f:id:HARINEZUMI:20130728070101p:image


は?

見たところ、確かに英数字はArialが効いているが

それ以外はMS ゴシックで表示されてる。超ダサい。


ggったところ、Operaはfont-familyに複数のフォントを指定できないらしい。未だに。

いや、指定は出来るけど最初の1つしか認識しない。

最初の一つで指定されたフォントに含まれない文字がページ中にある場合、

デフォルトのフォント(MS ゴシックやMS明朝)で表示される仕様。




(;^ω^)ウザッ


IEもビックリですよ。ええ。




…とりあえず、MSゴシックだけは避けたい。

てなわけで、上の複数フォントCSSを先に読み込んだ上で

以下のJavaScriptで暫定対処。

(function(UA, d){
	if (~UA.indexOf("Presto")) {
		if (~UA.indexOf("Windows NT 6")) {
			d.writeln('<style>*{font-family:メイリオ;}</style>');
		}
		if (~UA.indexOf("Mac OS X")) {
			d.writeln('<style>*{font-family:"ヒラギノ角ゴ Pro W3";}</style>');
		}
	}
})(navigator.userAgent, document);



ユーザーエージェントに応じPHPとかでfont-family部分だけを書き換えて

動的にCSSを出力する方法もあるけど、たかがOperaの為にこんなくだらないことで鯖に負荷をかけたくない。




はてなダイアリーとはてなグループ日記は詰み

このブログ(はてなグループ日記)やそのベースとなっているはてなダイアリーは

JavaScriptが使えないのはもちろんのこと

外部CSSファイルを読み込むことすらもできない。


うわあぁぁぁぁぁぁん

▂▅▇█▓▒░('ω')░▒▓█▇▅▂