webフォント(ドラクエフォント)あつかったよ。

webフォント(ドラクエフォント)を扱うハメになり、全角をごにょごにょしたりしています。
見た目がシュールなので、なにかあるときに使うと面白いかも!です!
webフォントはCSS3からなので、昔のブラウザでは対応してないようです。
そのへんに注意が必要です。

今回つかわせて頂いたフォントがこちら!
ドラクエフォント
ドラクエフォントは漢字がつかえないので、全角ひらがな・かたかな・数字あたりのみになりますね

(´・ω・`)ソリャーソウカ

■使い方!
フォントをダウンロードしてttfファイルを解凍します。
フォントをサーバーにCSSと一緒に上げておきます。
下記のようにcssに読み込むフォントとURLを記述します。

@font-face {
font-family: ‘DragonQuestFCIntact’;
src: url(‘DragonQuestFCIntact.ttf’);
}

これでOK。

■デモ
デモページ作ってみました。
https://tools-codelike-info.herokuapp.com/demo/webfontUseTest

■リンク
デモページのコード
第4回 CSS3のWebフォントを使ってみよう
ドラクエフォント

html&cssWeb
独学に限界を感じたら、オンラインのプログラミングスクールへ...
  • Code ViIlage
      挫折させない本気のプログラミングスクール。学習継続率93.3%・卒業生800名以上。
  • DMM WEBCAMP
      働きながら自分のペース学んでエンジニア転職。無料カウンセリング満足度99%!
  • TECH CAMP
      無料カウンセリング満足度95%!本業に活かせる。キャリアアップにつながる。
  • TechAcademy
      現役エンジニアから学べるオンラインに特化したプログラミングスクール。
  • テックパートナーズカレッジ
      WEBシステム開発会社のノウハウが学べるオンラインスクール。14日無料体験有り!
  • \ PHP・Laravelに特化したオンラインスクール /
    yasuakiをフォローする
    codelikeなブログ

    コメント

    タイトルとURLをコピーしました