
Safari 3.1でWebフォントを利用する--様々な字体を定義する
エ・ビスコム・テック・ラボ
2008-04-04 08:00:00
インストールされたフォントの定義を行う
@font-faceでは、サーバー上に用意したフォントだけでなく、表示環境にインストールされたフォントの定義を行うこともできる。たとえば、「Arial」のボールド体のフォントを変更するといったことが可能だ。
「Arial」はWindowsやMacintosh環境に標準でインストールされているフォントファミリーで、以下のようなフォントで構成されている。
- Arial
- Arial Italic
- Arial Bold
- Arial Bold Italic
- Arial Black
Arialを使って文字を表示した場合、標準の設定では、ブラウザはローマン体を「Arial」、ボールド体を「Arial Bold」で表示する。
※ブラウザで表示を確認する
次のソースように@font-faceでフォントを定義すると、ボールド体を「Arial Black」で表示することができる。なお、表示環境にインストールされたフォントをsrcで指定する場合は、url()の代わりにlocal()を利用して、フォントの名前を指定する。
/* =============================================== */ /* フォントの定義 */ @font-face{ font-family: Arial; src: local('Arial'); } @font-face{ font-family: Arial; font-weight: bold; src: local('Arial Black'); } /* =============================================== */ div{ font-family: Arial; font-size: 40px; } div#font01{ font-weight: normal; } div#font02{ font-weight: bold; }
My Favorite Songs - 12345My Favorite Songs - 12345
※ブラウザで表示を確認する
- コメント(2件)
#1
y2
2008-04-04 12:50:19
「字体」の定義が標準的なものとは違うので、混乱する読者がいるかもしれません。
#2
Cee
2008-04-07 11:26:24
前回の背景画像複数指定も含め、まずはそれぞれのブラウザによる対応が必要となり、ウェブサイトでの実現は数年先かな~と思います。が、これらの進歩には将来をとても期待させられます。がんばれ~
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
分析されたデータを活用できるか?
-
AI活用が激変する新たなインフラ
-
Why ワークプレース?
-
ウルトラ帳票文化を乗り越える!
-
講演レポ:ポスト2020時代の基盤
-
DX成功の鍵はセキュリティにあり
-
攻めと守りのクラウド活用とは!?
-
クラウドバックアップお悩み相談室
-
隗より始めよ
-
ビジネス成功の砦はここにあり!
-
データ活用を加速するエコシステム
-
働き方改革は身近な「改善」から
-
サブスクモデルのSaaSで業務改善
-
意識してますか?PCの「信頼性」
-
2020年代を勝ち抜くインフラ
-
ITシステムは永久のβ版思考で
-
下した決断は「ハイブリッドへ」
-
レガシーなインフラ設計を見直す
-
働き方改革にモニターが有効なワケ
-
明治創業の鉄道企業がAWSに挑戦
-
「脱レガシー」なくしてDXはない
-
特集:ポスト2020時代のCX再考
-
働き方、生産性を根底から底上げ!
-
RPAがニガテなExcelをどう使う
-
特集:ビジネスを止めるな!
-
どこまで可能?企業を究極の自動化
-
ビジネスの大きな転換点で勝者に!
-
変化への対応はリアルタイム経営で