ウェブサイトの表示をさせる際に、自分で指定したフォントで相手にも表示させる方法です。
通常、ウェブサイトのフォントは、閲覧する人のコンピュータに同じフォントがなければ、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形式に変換して使う、ということが認められてない場合があります。
フォントの利用規約を確認してから行いましょう。
CSSで、マウスオーバー時に、徐々に色が変化したり、形が変化するようなアニメーション効果を付ける方法です。 CSS3で実現 例えば、マウスオーバー時に色を徐々に変化させたい場合には、以下のように書きま…続きを読む
CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。 「～かつ、～」というセレ…続きを読む
ウェブページの内容量が少ない場合には、フッターをブラウザの表示領域最下部に表示し、内容量がある場合にはスクロールした最下部に表示する方法です。 フッターを画面最下部に表示する HTMLソース <…続きを読む
FTPソフトである「FileZilla」を使ってサーバ上のファイルを削除しようとしたときに、 「8ビット文字コードへ変換するコマンドに失敗しました」 というメッセージが出てしまい、削除できないことがあ…続きを読む
Windows7からWindows10にアップグレードしたところ、Apacheが起動しなくなりました。 Apacheが起動しなくなる理由には大きく2つあります。 1つ目は、httpd.confの書き間…続きを読む
CSSの設定のみで、内容が少ないページであっても、フッターは最下部に表示され、さらに内容がたくさん書いてある場合には、スクロールした最後にフッターが表示されるようにする方法です。 以前にも紹介しました…続きを読む
Zoomを有料で契約していると、1年ごとの自動更新に設定されます。 Zoomを解約する方法を調べました。 Zoomの自動更新をキャンセルする Zoomの解約とは、契約の自動更新をさせなくすることと同義…続きを読む
GoogleMapにリンクを貼るときに、URLが長くなってしまうのを防ぐ、短縮URLの取得の方法です。 まず、GoogleMapを開きます。 左上の検索窓に住所を入力して、その住所を検索します（ここで…続きを読む
Microsoft Edgeのキャッシュを削除する方法を調べました。 Edgeの右上の設定アイコンから「設定」をクリックします。 「Cookieとサイトのアクセス許可」から、「Cookieとサイトデー…続きを読む
ulタグを使ったリストをCSSで二段組にして表示する方法です。 HTMLのコード <h2>リスト表示</h2> <ul class=”menu”&…続きを読む