Safari 3.1でWebフォントを利用する--様々な字体を定義する
エ・ビスコム・テック・ラボ
2008/04/04 08:00
Safari 3.1が対応したWebフォント。今回は様々な字体を定義してみよう。
前回の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」で表示する設定にした文字でも、その字体によって使用されるフォントファイルが変わるようになる。
- 6人の推薦記事
- 4人がクリップ
-
ソーシャルブックマーク(-)
- トラックバック(0)
-
- タグ
- Safari
- フォント
- CSS
- ブラウザ
- Apple
- HTML
- safari
- css
- font
- Safari 3.1
- Web Fonts
- ローマン体
- イタリック体
- ボールド体
- ボールドイタリック体
- スモールキャップス体
- font-style
- font-weight
- font-variant
- font-stretch
- font-size
- src
- Webフォント
- descriptor
- Arial
- Arial Italic
- Arial Bold
- Arial Bold Italic
- Arial Black
- font-family
- @font-face
- exljbris
- Fontin Sans
- CSS 3
- コメント(2件)
#1 y2
- 2008/04/04 12:50
「字体」の定義が標準的なものとは違うので、混乱する読者がいるかもしれません。
» 不適切なコメントを報告する
#2 Cee
- 2008/04/07 11:26
前回の背景画像複数指定も含め、まずはそれぞれのブラウザによる対応が必要となり、ウェブサイトでの実現は数年先かな〜と思います。が... 続きを見る
» 不適切なコメントを報告する
- 特集: FirefoxとSafariのCSS徹底検証 (66件)
- ホワイトペーパー
- 企画特集
- 話題のタグ
Off Topic
Database
Windows 7
Windows Vista
Mozilla
セキュリティ
クラウド
アプリケーション
linux
Windows
仮想化
OS
Firefox
CSS
Windows XP
Safari
iPhone
ソフトウェア開発
脆弱性
開発環境
小技
Apple
Flash
データベース
google
Tips
UI
php
HTML
マイクロソフト
Firefox 3
iPhone 3G
リファレンス
java
Internet Explorer
javascript
Mac OS X
Microsoft
Ajax
Webデザイン
プログラミング言語
Chrome
iPod touch
オープンソース
Opera
インストール
ブラウザ
RIA
Webサービス
WebKit
話題のタグを見る »
SQLite対応アプリのデータベースファイルを閲覧する
グーグル、「Google Buzz」を発表--Gmailのソーシャル機能を強化
「H.264」ストリーミングのロイヤリティ無料期間が延長
マイクロソフト、「Office 2010」のRC版をリリース
新しい視点のレンタルサーバが誕生!
Xbox Live インディーズゲーム開発の軌跡
身近な業務をCRMが変革!
レガシーアプリケーションの稼働どうしてる?
御社はまだフリーの転送サービスですか?
仮想環境のバックアップは難しいのか
利用者の理想を追求した最新レンタルサーバ
経営統合後の事業損益構造の見える化を実現
アンケートから見るセキュリティ対策の実態
事例 VMwareでデータセンターをクラウド化
アプリケーション仮想化 3つの課題
通販サイトのアクセス集中からの危機を救う
仮想化をダメにするストレージの実態
DBのパフォーマンスに困ってませんか?