忍者ブログ
  • 2025.09
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 2025.11
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

【2025/10/18 23:13 】 |
Webフォントを使うときのメモ
Web上で自分で好きなようにフォントを定義したときのメモです。
あくまで個人のメモなのでうまくいかなくてもあしからず。

WOFFコンバータを使ってWOFFファイルとEOTファイルを生成する。
・WOFFはWebフォントの標準フォーマット
・EOTはIE用のフォーマット
このときのTrueTypeフォントを使うのがポイント。OpenTypeフォントでもかまわないけどブラウザによってはきちんと表示されない場合あり。

こんな感じのCSSを作る


@font-face {
font-family: "ConvertedFonts";
src: url("変換したフォント.eot?") format('eot'),
url("変換したフォント.woff") format('woff'),
url("変換したフォント.ttf") format('truetype');
}
.ConvertedFontsClass {
font-family: "ConvertedFonts";
}


このときのポイントは変換に使ったTrueTypeフォントもソースに使うこと。
HTMLでlinkタグを使って外部CSSとして読み込んでもいいし、styleタグを使って同じファイルに記述してもいいから、とりあえずCSSを使えるようにする。

で、後は普通のCSSと同じ感じでspanタグやらdivタグで囲んでやればOK

これで、たぶん環境に関係なく同じフォントで閲覧できるはず。

P.S.
自作以外のフォントを使うときは必ず使用条件を読んでおいてください。ときどき変換がアウトなフォントがあるので。
PR
【2011/03/30 12:23 】 | コンピュータ | 有り難いご意見(0) | トラックバック()
<<Ubuntu 11.04 for Server導入メモ | ホーム | ひさしぶりにFedora>>
有り難いご意見
貴重なご意見の投稿














虎カムバック
トラックバックURL

<<前ページ | ホーム | 次ページ>>