デバイスフォントに長体をかけてみよう

とある案件でやったやつ。です。
デザイナさんの要望で長体かけたかったのだけど、画像にはできない。
ならばどうしよう、と考えた結果の実装例です。

サンプル

こんな感じ。
qiita_scale_sample_0717.png

現時点であまりこういう処理しているサイトを見かけないし、ちょっとイケてる感が出せますよね。
エンタメ系の案件以外ではあんまり出番が無さそうかもですが……。

見た目だけじゃなく、同じスペースでも文字を気持ち多めに詰め込めるというメリットもありますね。
スマホだと動作もたつくかなぁと思ったけど、全然そんなことはなかった。

実装方法

ソース例。

HTML
<article class="article-narrow">
    <p>
        テキストは普通に入れてOK。<br>
        春日部ハル「メラメラって感じです!」
    </p>
</article>
CSS
.article-narrow {
    width: 600px;
}
.article-narrow p {
    transform-origin: 0 0;  /* 要素の左上を基準に変形をかける */
    transform: scaleX(0.9); /* 長体率(%) / 100 */
    width: 111%;            /* 要素幅調整(下記参照) */
}

早い話が、対象の要素にtransform: scaleX(長体率(%) / 100) と指定してやるだけです。
ただ、そのままだと幅が縮まってしまうので、幅を広げて調整するのがポイント。
scaleがかかった後に親要素の幅と等しくなるよう、
親要素の幅を基準に(100 / (長体率(%)) * 100)%をかけてあげるとよいでしょう。
※そのままだと読み辛いので、letter-spacing当てた方がよいと思います。

WebフォントでCondensedなフォントが使えればそれが一番良いんだけど。
※有料のWebフォントが使える案件なら、フォントワークスのUD角ゴとか使えば最高だとおもいます。

実際の適用例とか

……というやつを使って組んだ同人即売会のサイトがこちら→アクアマリンドリーム
実案件で使っても特に問題が出なかったので、趣味関係の案件でも使っていくスタイル。

サンプルテキストは WITCH NUMBER4 / SAKURA より。
ナナシスを聴いてください。

[紹介元] CSSタグが付けられた新着投稿 – Qiita デバイスフォントに長体をかけてみよう

  • コメント

    1. 匿名希望
      2017/08/19(土) 20:14:06

      デバイスが見たい!(5000兆円フォント)

    2. 匿名希望
      2017/08/19(土) 20:14:06

      あぁやっぱりか。Firefoxでアクティブ状態ならFlashのデバイスフォントは問題ないけど、非アクティブ状態でFlashのデバイスフォント書き換わるとバグるっぽい。サイズ関連と位置が初期値?のままになるみたい。
      ニコ生従来配信運営コメントでそうなる原因はそれかなぁ

    3. 匿名希望
      2017/08/19(土) 20:14:06

      Firefox55にしてからニコ生の運営コメントがどうにも少し右下にずれるバグをちょいちょい見るようになった。デバイスフォントのアンチエイリアスのかかり方もちょっと変わってるし・・・

    記事に戻る

関連記事