最近よく使用されているCSSの実装テクニック！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator
フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。メディアクエリは一切不要なので、たった一行で全サイズを設定できます。 CSSのclamp()関数を使用して、レスポンシブ対応のフォントサイズを超簡単に定義できるツールを紹介します。 clamp() Calculator clamp() Calculatorの特徴 clamp() Calculatorの使い方 clamp(
読みやすいフォントの CSS 設定例 | murashun.jp
［ ＋ expand ］美しいフォントとはフォントの種類ゴシック体 vs 明朝体Web フォント総称ファミリーfont-family の設定例フォントのサイズフォントの色フォントの文字間隔フォントの行間まとめ関連記事美しいフォントとは 昔から Windows のユーザでしたが、初めて Mac のフォントを見たときの衝撃は今でも忘れられません。Windows と比べて Mac のフォントの美しさは際立っていました。その美しいフォントは "ヒラギノ" と呼ばれ、Mac の中心的なフォントのひとつで、これ以上に美しい日本語のフォントは見たことがありません。 Windows と Mac ではフォントのレンダリング方法が異なるため、今日に至っても Windows のフォントが美しくない問題は解決されていません。しかし、Windows は Vista 以降から "メイリオ" と呼ばれるフォントが収録さ
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
日本語Webフォントの革命 - 3846masa's memo
日本語Webフォントに革命がおきた． 詳しくは続きを読んでくれ． ちょっと大きく出てみた． 実装についての記事はこちら この記事で言いたいこと 動的に日本語フォントのサブセットを作成してくれるOSSを作りました． サンプルページはこちら 臨時のサンプルページはこちら 追記 herokuが落ちてる，メモリ不足だな．早い所Dockerfileつくろう． 追追記 herokuで運用は再検討したほうがよさそう．「こういうこともできます」の事例ということでひとつ． （やっぱり普通のサーバで動かす分には大丈夫そうな気がする．どうだろう） そんなわけで，どうぞご利用ください。 （ちなみに粗い作りなので，pull-requestやissue投稿をしてくださると嬉しいです．） 何が革命なんだ 革命が起きたというけど，どこが革命なの？ 僕には革命が起きたようには思えないけど そんなこと言わんといて，泣くわ．
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダン日本語フォント指定
