バリアブルフォント(Variable Font)を使用した簡単なhtml

バリアブルフォント(Variable Font)を使用した簡単なhtml

バリアブルフォントおもしろそうなので簡単なhtmlを実装してみた

環境

  • WEBサーバー apache httpd
  • OS  CentOS Linux release 8.0.1905 (Core)

バリアブルフォントとは

バリアブルフォントとは、Adobe・Apple・Google・Microsoftが共同で開発した新しいフォントの規格。
下記のように、フォントの太さや字幅などを自由に調整することができる

Hello, World !!

「wght」と「wdth」を指定して、フォントの太さと幅をコントロール

対応ブラウザ

ブラウザの対応状況はこちらより確認できます。かなり対応されてます。

fontの入手

今回は「LeagueSpartanVariable.ttf」というフォントを利用してみる

入手先はこちらより可能。アクセスしたら「Download」ボタンをクリック

HTMLの作成

index.htmlという名前で下記のhtmlを作成する

後は、同じ階層に作成した「index.html」とダウンロードした「LeagueSpartanVariable.ttf」をWEBサーバーの公開ディレクトリに置くだけ

※下図の場合、公開フォルダの直下で利用

自分の環境だと、http://プライベートIP:81にアクセスすれば、Hello World!!が表示される
※httpd apacheが自分の環境だと81番ポートを利用している

装飾記号も可能

Zycon.ttf を利用することで、猫の実装も可能。

🐈

Zycon.ttf のダウンロードはこちらより可能

html

cat.htmlで保存して、さきほどと同様に、Zycon.ttfと同一階層にアップ

※cssが、src: url(‘Zycon.ttf’)と指定しているので同一階層にフォントをアップする必要があるだけで、パスは自由に設定可能です

ディレクトリ構成参考