Zuruzuru Blog
🍜< ズルズル

👉ブログ一覧へ👉トップページへ

September 01, 2021

メラメラしたりぼこぼこしたり

#googlefonts

何をするかって言うとメラメラしたりぼこぼこしたりするってことです。

google fonts のドキュメントを漁っていたら、font effects なるものを見つけました。 β 版なものの 簡単に font にスタイルを与えられていろいろ遊べそうです。

導入方法

ここに effect のリストがあるので好きな effect を選んで、google fonts と同じようにeffect=<effect_name>で指定してfont-effect-<effect_name>を class に適用するだけです。

<head>
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Roboto&effect=fire"
  />
</head>
<body>
  <h1 class="font-effect-anaglyph">こんにちは</h1>
</body>

サンプル

anaglyph

　かっこいい感じ

emboss

　ぼこぼこにされた

fire

　フォント火災

fire-animation

　めらめら動くよ

neon

　雰囲気ある

outline

　安っぽい感じが良い

shadow-multiple

　くっきりしてて好き

3d

　近未来

3d-float

　薄くて読めない

まとめ

結局そんな使い道なさそう。 なにかを燃やしたい衝動に駆られた時に使おう。