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

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

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

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

年のみphpで出力する

ホームページなどでコピーライトが2011年とか見ると少しさみしくなってしまいます。 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 カスタムフィールドを使って計算 WordP …

ワードプレスでスマホとPCで違う広告サイズを表示させる

アドセンスなどの広告サイズは画面に合わないとクリック率が下がりますよね。そこでスマホとPCで違うサイズの広告を表示させる方法をご紹介いたします。 関連記事: カスタムフィールドで画像を出力する時のヒン …

ECCUBE2.4のインストール時にエラーが出た場合

プラグイン側が2.4のサービスの提供を終了してきていますね。 関連記事: ホームページにパスワードを設置する方法 最低限覚えておけば副業で使える簡単なソースコード cssのハックと確認方法 ワードプレ …

クリックポストのやり方や料金について

クリックポストを初めて使う方や、やり方についてご紹介いたします。 関連記事: Yahoo!ショッピングの設定方法Step1の詳しい説明 Xサーバーで取得しているメールをGmailで受信する方法 iPh …

youtubeの動画をダウンロードする方法

この動画が削除される前にダウンロードしておきたいって動画や、編集したいと言う動画がyoutubeにありませんか? 関連記事: 検索結果に著者情報を掲載する方法 【2019年版】googleショッピング …