ウェブサイトの表示をさせる際に、自分で指定したフォントで相手にも表示させる方法です。
通常、ウェブサイトのフォントは、閲覧する人のコンピュータに同じフォントがなければ、CSSでfont-familyを指定しても表示されません。
自分で指定したフォントを相手にも見せたい場合には、以下のようにします。
閲覧する人のコンピュータにフォントがインストールされていなくても、ウェブ上にフォントファイルをアップロードして、それをブラウザに読み込ませて表示させる、という方法を使うと表示できるようになります。
.woff形式のフォントを用意します。
CSSで以下のように指定します。
※フォントはhtmlファイルと同じ階層にあると仮定しています。
@font-face{
font-family:"フォント名";
src:url(フォントファイル名.woff) format('woff');
}
body{
font-family:"フォント名";
}
@font-faceで指定したfont-family名を指定すると反映される、ということです。
CSSで複数のファイル形式を指定する場合は以下のように書きます。
@font-face {
font-family: 'フォント名';
src: url('フォント名.eot');
src: url('フォント名.eot?iefix') format('eot'),
url('フォント名.woff') format('woff'),
url('フォント名.ttf') format('truetype'),
url('フォント名.svg#webfontjSpbZQRv') format('svg');
}
フォントファイルとCSSとhtmlファイルをアップロードします。
ブラウザによって認識できるフォントの形式が異なります。
TTCやOTFなど、多くのフォント形式はInternetExplorerでは表示できません。
InternetExplorerが認識できるウェブフォント形式は.eotと.woffの2つです。
このうち、.eotはほかのブラウザでは認識できないため、現状では.woffの一択となります。
もし.eotを使う場合には、ほかのブラウザ用に別形式のフォントを用意して指定する必要があります。
.woff形式のフォントを持っていることはほぼないと思います。
その場合は、.woff形式に変換するウェブサービスやアプリを使うことができます。
以下はウェブフォントに変換するサイト／アプリです。
フォントによっては利用範囲が限られているものがありますので、勝手に.woff形式に変換して使う、ということが認められてない場合があります。
フォントの利用規約を確認してから行いましょう。
ウェブサイトにメールアドレスを記載するときに、「xxx@aaa.com」のように直接表記すると、メールアドレスを収集され、スパムメールを送り付けられてしまう可能性が増えてきてしまうため、JavaScr…続きを読む
ウェブページの内容量が少ない場合には、フッターをブラウザの表示領域最下部に表示し、内容量がある場合にはスクロールした最下部に表示する方法です。 フッターを画面最下部に表示する HTMLソース <…続きを読む
Windows7からWindows10にアップグレードしたところ、Apacheが起動しなくなりました。 Apacheが起動しなくなる理由には大きく2つあります。 1つ目は、httpd.confの書き間…続きを読む
ウェブサイトをスマホ対応しようとCSSをつくり、いざ確認してみるとAndroidとiPhoneで文字サイズがかなり違う、ということが起こりました。 iPhoneの方がAndroidよりも小さく、iPh…続きを読む
CSSでfloatを使って二段組レイアウトをつくった場合、フッターにfloatの効果を解除するには、clear:bothなどを使っていました。 しかし、clear:bothを使うと、marginなどの…続きを読む
ulタグを使ったリストをCSSで二段組にして表示する方法です。 HTMLのコード <h2>リスト表示</h2> <ul class=”menu”&…続きを読む
Chromeでウェブサイトをチェックしている場合、CSSを更新した際にブラウザの更新を行って再表示しても、CSSの変更が反映されません。 これはキャッシュがChrome内に残っているために起こっている…続きを読む
CSSの設定のみで、内容が少ないページであっても、フッターは最下部に表示され、さらに内容がたくさん書いてある場合には、スクロールした最後にフッターが表示されるようにする方法です。 以前にも紹介しました…続きを読む
FTPソフトである「FileZilla」を使ってサーバ上のファイルを削除しようとしたときに、 「8ビット文字コードへ変換するコマンドに失敗しました」 というメッセージが出てしまい、削除できないことがあ…続きを読む
Fireworks CS6を起動しようとしたら「現在のFireworksユーザー権限では、レジストリ情報を更新することができません。Dreamweaverを併用しての起動と編集機能は、管理者権限でFi…続きを読む