タグ

cssとfontに関するkudakurageのブックマーク (6)

  • 2016年最強のFont family設定 - ミルログ

    いつもサイト運営者を悩ませる Font-Family の指定。 今回は最先端な Font-Family 指定を考えてみました。 2017年になりましたが特にフォント環境の動きがなかったので、少なくとも当年中はこの記事を更新の更新を続けていきます。 当サイトで指定しているFont Family 当サイトでは現在、こんな感じで指定しています。 font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif; クリップボードにコピー スポンサーリンク Mac では安定のヒラギノ Mac では普段目にするフォント、ヒラギノ角ゴを指定します。 なんだかんだでずっと Mac のシステムフォントとして使われてます

    2016年最強のFont family設定 - ミルログ
  • 文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング - ICS MEDIA

    游ゴシックではプロポーショナルメトリクスは効果的 WindowsmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較! 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定(和文等幅)の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境:ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの

    文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
  • CSS Font Features

    Font features are a way to enable advanced text styles and effects as designed by the font author. A font may support a number of features: some examples include different kinds of ligatures, tabular numbers, or small caps. Because the designer explicitly created forms for these variants in the font file, using font features is the highest quality way of achieving these effects. Enabling font feat

    CSS Font Features
  • Typhooon

    2つのセレクトボックスを連動させる時に初めて気づいた問題です。 次のようなものを実装しようとしていました。 セレクトボックスAとセレクトボックスBには同じ値がセットされていて、セレクトボックスAで値を指定すると、その値を除いたものだけがセレクトボックスBに表示されるというものです。 実装の方法として、セレクトボックスAが選択された時に、セレクトボックスBの値と比較して同じものだけを非表示にすればよ […]

  • 【完全版】Ligature Symbols フォントセットの自作方法 - くらげだらけ

    今月の初めにLigature Icon フォントセットの自作方法とWebFontというエントリーを書きました。これはsymbolsetというサイトにinspireされて、Ligature機能を使ったSymbol Web Fontを自作しようという試みを書いたものです。しかし、この時はsymbolsetで実現されているようなものには及ばない不完全なものになってしまいました。 その後、いろいろと調べたり試したりする中でsymbolset相当のWebFontを自作することが出来ました。今回はそのプロセスと技術的解説について紹介したいと思います。 Ligature Symbols について まずは今回自作したWeb Fontのデモページをご覧ください。 【DEMO】 Ligature Symbols 今回作成したLigature Symbols FontはOFLライセンスで公開しており、ダウンロー

    【完全版】Ligature Symbols フォントセットの自作方法 - くらげだらけ
    kudakurage
    kudakurage 2012/07/20
    本日(2012.7.20)公開したLigatureSymbolsにおいて、一部の環境でChromeやSafariでもLigatureが表示できない現象が確認できています。発生条件が不確定なためすぐに対応することはできませんが、原因追求に努めたいと思います。
  • サービス終了のお知らせ - NAVER まとめ

    サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

    サービス終了のお知らせ - NAVER まとめ
  • 1