|
Webフォントカスタマイズbody, td, th, div, p, label, input { font-family:"Century Gothic",Arial,"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif!important; } ただ、クラウドによりネット上で使用できるWeb Fontsを利用する環境も整ってきたみたいでインストールやサーバーで独自でフォントを用意せずとも好きなWeb Fontsを使えるGoogle Web Fontsが魅力的だ。かなり種類が充実しているが、おのずと好みが決まってくるので以下でチョイスしてます。
 http://www.google.com/fonts/#HomePlace:homeにて「Start choosing fonts」をクリックしてお好みのフォントを探していきます。見つかったら下の図の緑部分をクリック。  次のページにhtml部分のヘッダーに入れる要素とCSSに入れる要素が出てきます。（やや下）  < link href='http://fonts.googleapis.com/css? family=○○○○+○○○○'rel='stylesheet'type='text/css' > /* ○○○はgoogleフォント名でたいてい＋で繋いでいる */ 任意のクラス名 { font-family:'○○○○ ○○○○',sans-serif; } /* ○○○はgoogleフォント名でCSSでは＋を省く */以下は、使えそうなgoogleフォントを抜粋して掲載しました。 先ほどの法則からフォント名の半角空き部分に＋が挿入されリンクの指定フォントファミリー名となります。 Add this code to your website:のURLだが、SSLで保護されているhttpsなページにコードを追加する場合、https://fonts.googleapis.com/css?family=フォント名にURLを変更しないと、ChromeでWebページを確認したときに、Webフォントが表示されない。それと同じくChromeブラウザではFont Changerたるプラグインをブラウザに追加してやらないとWebフォント自体描画できないというトラブルがあるのだが…現在解明中。まだまだ安易に使うのは注意が必要。 さらに下記はgoogle以外のwebフォントですが、色々制約やルールがあります。 基本は同じサーバー内にアップロードして.ttf等のtruetypeを引っ張ってきます。
解凍したファイルのフォルダ内にある「APJapanesefont.ttf」というファイルをサーバーへアップロードする事になるが、このフォントをInternet Explorerでも表示させるために「eotファイル」を用意する必要がある。 そこでtttファイルをeotファイルに変換（かん）してくれる下記サイトにアクセスして変換（かん）をかける。 http://ttf2eot.sebastiankippe.com/  ふい字置き場。
武蔵システムさん
武蔵システムさんでWOFFコンバータたるものが…●WOFFはWeb Open Font Formatの略で、Webフォントの1形式です。 ●WOFFの作成と同時にEOT（Embedded OpenType）ファイルを作成することもできます。
/* Webフォントを指定する＠ルール書式内容 */ @font-face { /* この仮想的なフォントのフォント集合名を定義 */ font-family:追加フォント; /* この仮想的なフォントの本体となるフォントへの参照URL */ src: url(http://example.com/serverfont.woff); } /* あんずフォントの場合 */ /* IE対策 */ @font-face { font-family: Anzu; src: url(APjapanesefont.eot); } /* Firefox, Opera, Safari 対策*/ @font-face { font-family: Anzu; src: url(APjapanesefont.ttf) format("truetype"); }尚、http://css3.sophia-it.com/reference/Webフォントを指定するには？ に詳しく記述がされている。さらにwebフォントが全くプレビューされない問題でちょっと調べてみた結果、googlechromeの右の3本線＞設定＞詳細の設定を表示…＞ウェブコンテンツのフォントサイズを中から小に変えたら文字が出た〜なんだこりゃ？？？？？ 最新版Google Chromeにてフォント一覧が正常に表示されない現象についてGoogle Chromeダウングレードサイトてっく煮ブログ〜意外と多い!? Web フォントに対応していない環境 ～2012 年の Web フォント事情chromeの最新バージョン 33.0.1750.117みたいなんで、ダウングレードするしかない…ただしこのバグが解ってる人ならwebフォントの文字抜けブランクも気づくかもしれないがそのまま見落としの方が多くて危険…かも。
|
||||||||||||||||||||||||||||||
 |
Copylight TSUKA AllRights Reserved.
