tsuka-time - XHTML+CSSスタイル

● profile ● ログイン

《イラスト●open●close》

alt

インパクト度が高い“ポップサークル”

結構設置がめんどくさいjQueryのポップサークル。真ん中のビジュアルを押すとメニューが四方に広がり目立ち度は高そうだけどliタグを使っているので、他の指定とバッテングしちゃうしiOSの5用Safari動かない…極めつけはメインビジュアルのjQueryとぶつかってる（汗）＄の定義とかじゃなく要素の固定と浮遊の識別相違なんでやっかい。今の所大技のjQuery同士は分離してあげるようにしてる。

コメントを追加

Webフォントカスタマイズ

本来、日本語フォントは外来語に比較して字数が多いため、PCに入っている書体を使うのが主流。よって、メイリオからヒラギノを中心に各ブラウザやOSに合わせて美しいフォントが使われる様に指定する（その辺の情報は概出ので省略）フォントの順番が使われる優先順序となる。

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フォント自体描画できないというトラブルがあるのだが…現在解明中。まだまだ安易に使うのは注意が必要。

Poiret One Font

Marcellus SC Font

Montserrat Alternates Font

Josefin Sans Font

Covered By Your Grace Font

Nothing You Could Do

Give You Glory

Just Me Again Down Here

Nixie One

Reenie Beanie

Raleway Dots

Alex Brush

さらに下記はgoogle以外のwebフォントですが、色々制約やルールがあります。
基本は同じサーバー内にアップロードして.ttf等のtruetypeを引っ張ってきます。

Bordofixed Tryout-ttf

Bordu-ttf

あんず文字フォント-eot-ttf

ふい文字フォント-woff

まきば文字フォント-woff

あんずフォントはあんずいろapricot×colorさんです。

上記サイトにて「apjapanesefonth.zip」という圧縮ファイルがダウンロードされるので、解凍したファイルを同一のサーバー内に追加する事で、Webフォントとして「font-family: Anzu」の指定が出来るようになります。
解凍したファイルのフォルダ内にある「APJapanesefont.ttf」というファイルをサーバーへアップロードする事になるが、このフォントをInternet Explorerでも表示させるために「eotファイル」を用意する必要がある。
そこでtttファイルをeotファイルに変換（かん）してくれる下記サイトにアクセスして変換（かん）をかける。

http://ttf2eot.sebastiankippe.com/

ふい字置き場。その他フォントも使用方法は同じです。原理的にはPCに入ってるものをサーバーに埋め込みます。くれぐれも著作権には注意です。

武蔵システムさん武蔵システムさんでWOFFコンバータたるものが…
●WOFFはWeb Open Font Formatの略で、Webフォントの1形式です。
●WOFFの作成と同時にEOT（Embedded OpenType）ファイルを作成することもできます。

形式	拡張子	format()の値	概要
TrueType	.ttf	truetype	WindowsやMacで使われる一般的なフォント形式
OpenType	.ttf, .otf	opentype	PostScriptとTrueTypeを統合したフォント形式。TrueType形式で作成されたものは「.TTF」、PostScript形式のものは「.OTF」となる
WebOpenFontFormat（WOFF）	.woff	woff	Web用の新しいフォント形式。データが軽いのが特徴。
EmbeddedOpenType（EOT）	.eot	embedded-opentype	米マイクロソフトが開発したWebページ用のフォント形式。IEのみ対応
SVG Font	.svg, .svgz	svg	SVGを利用したフォント形式
表3：format()の値

/* 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ダウングレードサイト

てっく煮ブログ〜意外と多い!? Web フォントに対応していない環境～2012 年の Web フォント事情
chromeの最新バージョン 33.0.1750.117みたいなんで、ダウングレードするしかない…ただしこのバグが解ってる人ならwebフォントの文字抜けブランクも気づくかもしれないがそのまま見落としの方が多くて危険…かも。

コメントを追加

さらに記事を読む...