稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

副業で稼ぐ仕組みの作り方

WEBフォントはcss3で簡単に使えた

投稿日:2016年12月31日 更新日:

WEBフォントを使って好きなフォントをWEB上に公開しよう

はじめに

最近クライアントから「丸っこいフォントで公開したい」と言う要望があり、調べてみたらWEBフォントが結構簡単に導入できるっぽかったのでご紹介させて頂きます。

注意事項

ローカルだと表示されません、WEB上で試してください

WEBフォントを用意する

webfont1

まずはWEBフォントを用意してください。
ttfしか持っていない場合はttfをwoffに簡単に変換できた!を参考にしてください。

そしてアップロードしておきます。

cssに書こう

では、早速作ってみましょう。

cssにはこのように書きます。

@font-face
{
    font-family:'webfont';
    src: url('eotファイルへのURL') format('eot'),
         url('woffファイルへのURL') format('woff'),
         url('truetypeファイルへのURL')  format('truetype');
 
}
.hui { font-family:webfont;}

@faceのfont-familyには好きな名前を付けてください。その場合は.huiのクラスで指定している部分も必ず変更しましょう。

html側はこんな感じです

<p class="hui">このテキストはWEBフォントを使っている</p>

たったこれだけでおk

実際に見てみてね

webfont

実際にどのように表示されるか確認してください。

WEBフォントのデモはこちら

どうでしょうか?
めっちゃ簡単ですよね。

以上でWEBフォントはcss3での使用方法の説明を終了いたします

さいごに

WEBフォントはデザインを1から

WEBフォントは同じフォントサイズを指定しても、サイズにかなり差があります。
なのでデザインを事前に使っていたら最初からやり直さないといけないのが正直面倒ですよね。

これさえクリアしていれば是非導入したいですよね。

但し、問題としては日本語に対応しているWEBフォントがやはり少ないのが欠点です。
英語と違い、日本語はひらがな、カタカナ、漢字、英数字などボリュームがあるのでなかなかできないのが現実です。

Googleさんオナシャス!

そうそう、過去にもWEBフォントに関して紹介した情報があるのでWEBフォントを無料で使えるタイプスクウェアも是非読んでくださいな。

-副業で稼ぐ仕組みの作り方
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

カスタムフィールドを使って計算 WordPress

ワードプレスのカスタムフィールドと言う機能を使って計算する方法をご紹介いたします。 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 Custom Field Suiteの表示 …

【EC-CUBE】ブロックで作成したtplファイルを呼び出す方法

EC-CUBEで管理画面からブロックを読み込む簡単な方法をご紹介いたします。 関連記事: 【EC-CUBE】管理画面に色々な箇所のファイルを呼び出す方法 商品一覧ページを第一階層ごとにデザインを変える …

さくらサーバーにドメインを移す【移管方法】申込み

前回に引き続きドメインの移管方法についてになります。 関連記事: シーサーブログにメニューを作る方法 サクラサーバーに転入する方法2015 さくらサーバーにドメインを移す【移管方法】準備 ムームードメ …

The WordPress Popular Posts “classic” widget is going awayって出るやつ

ワードプレスのアップデートで急に黄色枠で注意喚起が表示されてしまいましたよね 関連記事: ワードプレスに人気記事を自動的に表示させるWordPress Popular Posts ワードプレスでメルマ …

no image

大容量ファイルをメールで送る方法

写真や音楽データ、その他メールでは送信できない大容量ファイルをメールで送る方法です。実際はメールで送ると言うより、ファイルをアップロードし、ダウンロードURLをメールでお送りする事で大容量のファイルを …