
Safari 3.1でWebフォントを利用する--様々な字体を定義する
エ・ビスコム・テック・ラボ
2008-04-04 08:00:00
前回のSafari 3.1でWebフォントを利用する--SafariのCSS対応に続いて、Safari 3.1が対応したCSS3のWebフォントの機能について紹介する。今回は、イタリック体やボールド体のフォントを個別に指定したり、インストールされたフォントの定義を行う方法を見ていきたい。
イタリック体やボールド体のフォントを定義する
フォントには、イタリック体(斜体)やボールド体(太字)といった字体がある。Webフォントではこうした字体ごとに、使用するフォントファイルを指定することが可能だ。
前回のサンプルで利用した、exljbrisのFontin Sansというフォントには、ローマン体(正体)だけでなく、イタリック体、ボールド体、ボールドイタリック体(太斜体)、スモールキャップス体のフォントファイルが用意されている。そこで、今回もこのフォントを利用して字体ごとにフォントを定義してみたい。
字体ごとにフォントを定義するには、@font-faceにfont-styleやfont-weightの設定を追加する。ここでは上から順に、「WebFont」というフォントファミリーのローマン体、イタリック体、ボールド体、ボールドイタリック体のフォントを定義している。なお、スモールキャップス体の設定にはSafariが対応していないので、ここでは定義していない。
@font-face{ font-family: WebFont; src: url('font/Fontin_Sans_R_45b.otf') format("opentype"); } @font-face{ font-family: WebFont; font-style: italic; src: url('font/Fontin_Sans_I_45b.otf') format("opentype"); } @font-face{ font-family: WebFont; font-weight: bold; src: url('font/Fontin_Sans_B_45b.otf') format("opentype"); } @font-face{ font-family: WebFont; font-style: italic; font-weight: bold; src: url('font/Fontin_Sans_BI_45b.otf') format("opentype"); }
この設定を記述したスタイルシートでは「WebFont」というフォントファミリーが利用できるようになる。さらに、同じ「WebFont」で表示する設定にした文字でも、その字体によって使用されるフォントファイルが変わるようになる。
- コメント(2件)
#1
y2
2008-04-04 12:50:19
「字体」の定義が標準的なものとは違うので、混乱する読者がいるかもしれません。
#2
Cee
2008-04-07 11:26:24
前回の背景画像複数指定も含め、まずはそれぞれのブラウザによる対応が必要となり、ウェブサイトでの実現は数年先かな~と思います。が、これらの進歩には将来をとても期待させられます。がんばれ~
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
AWSセミナー講演レポート
-
真の生産性向上を成す働き方とは
-
AWSセミナー講演レポート
-
悩ましい!生産性と管理強化の天秤
-
どのクラウドかは重要ではない
-
加速する基幹システムのオープン化
-
ビジネス視点で評価せよ!
-
AWSセミナー講演レポート
-
AWSセミナー講演レポート
-
結局ここで手を抜いたら終わり…!
-
働き方改革のカギはズバリこれ!
-
vFORUMレポ!次世代の構築・運用へ
-
ITガバナンス協会副理事に聞く!
-
「ゼロ情シス」企業こそ攻めのITへ
-
CIOは部分最適ではいけない
-
すぐに使えるデータは3割以下
-
AWSセミナー講演レポート
-
事例で知るAWS徹底活用!
-
複雑なセキュリティ運用と決別を!
-
5G時代のネットワーク運用最前線
-
漫画:輸出管理の困ったに
-
コンタクトセンターが変わる!
-
急げ!新たなネットインフラの革新
-
「カジュアルなIoT」を実践!
-
コネクテッド・エンタープライズへ
-
DX時代に競争力の源泉となるHCI
-
兼任情シスでも、手は緩められない
-
IoT時代の新たなモノづくり
-
クラウドがもたらすITの価値
-
熱視線!「次世代メガクラウド」
-
AWSセミナー講演レポート
-
対談:大谷イビサ氏×ZDNet編集長
-
最近、Office 365が重い…!?
-
衝撃!サイバー攻撃の9割はメール
-
必須の時代!AIチャットボットの力
-
Windows 10 移行の課題に切り込む
-
NWに悩まない次世代クラウド基盤!
-
「ためられない」と分析もできない
-
SBI証券の挑戦!!
-
特集:ブロック至上主義からの脱却
-
いまどきのクラウド用語12選
-
デジ変した世界の勝ちパターン探る
-
まさにインフラ担当者の希望の星!
-
転換期を戦える組織やチームを作れ
-
AWSセミナー講演レポート
-
特集:AWS活用はここまできた
-
IoTは次のフェーズへ
-
機械学習は敷居が高い?
