トリビア・リンク

トリビア記録記　～移ろいゆく時の流れとともに～

カレンダー

カテゴリ

リンク

人気記事

RSSリンクの表示

プロフィール

クーア

インターネットで氾濫している情報の中で、一つ一つの情報を吟味・厳選してその時の感動を記事にしたいと思います。

カウンター

  • 08月 25 2012

  • Yahoo UI Library（YUI） Fontsの利用

  • 掲載カテゴリ : ノウハウ集
FireFoxやInternet Exploereといったブラウザを使用していたり、FireFoxでレンダリングエンジン切り替えを行った時にフォントサイズや行間のサイズ違いで異なって見えることがあります。

レンダリングエンジンの違いといってしまえば、それまでなのですがある程度同じように見えて欲しいというのが作成側の希望だと思います。Yahoo UI Library（通称：YUI）を使うことである程度解消できるので紹介します。⇒ ランキング

日本語フォント非対応でよければ、下記の1行を<body>より前に追加することで使えます。
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.6.0/build/cssfonts/cssfonts-min.css">

しかし、日本語フォント対応するにはYUIに修正を加える必要があるので、スタイルシートをカスタマイズする必要があります。
/* --------------------------------------------
 * YUI 3.6.0 (build 5521)
 * Copyright 2012 Yahoo! Inc. All rights reserved.
 * Licensed under the BSD License.
 * http://yuilibrary.com/license/
 * -------------------------------------------- */
body {
	font: 13px/1.231 "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif; /* modern browser */
	*font-size: small; /* IE 7 */
	*font: x-small; /* IE 6 */
}
select, input, button, textarea ,button { font: 99% "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif; }
table {
	font-size: inherit;
	font: 100%;
}
pre, code, kbd, samp,tt {
	font-family: monospace;
	*font-size: 108%;
	line-height: 100%;
}

使い方は簡単です。font-sizeの大きさを変更したい箇所に対してYUIの表を参考に指定するだけです。
#demo1 {font-size:85%;}  /*renders 11px */
#demo2 {font-size:100%;} /*renders 13px */ 
#demo3 {font-size:108%;} /*renders 14px */
#demo4 {font-size:123.1%;} /*renders 16px */
#demo5 {font-size:138.5%;} /*renders 18px */

デモページはこちら

コメント

コメントの投稿

   管理者にだけ表示を許可する