タグ

ブックマーク / qiita.com/RinoTsuka (3)

  • font-familyについて本気で考えてみた - Qiita

    今年はmacOSのアップデートによりヒラギノが動かなくなったり、 来年初頭にはWindows7がサポート終了、Edgeのブラウザエンジン変更など、 エンドユーザーの環境を考えなければならない節目の時です。 そこでいつもコピペで済ましているfont-familyについて1から考え直してみます。 全部読もうとしている人はスクロールバーを見てから考えてください。 結果 コピペユーザーのために先に結果を記載します。 ブログ等に転載する場合はこのページのURLぐらい貼ってください。 @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; } @font-face { font-family: "Original Yu Gothic"; src: local("Y

    font-familyについて本気で考えてみた - Qiita
    batta
    batta 2019/12/26
  • 2020年まで使えるfont-familyおすすめゴシック体 - Qiita

    新しい記事書きました。【font-familyについて気で考えてみた】 「Chromeでも読みやすい游ゴシックを指定する方法 」の記事で游ゴシックが一部ブラウザで掠れる問題を解決出来たので、font-familyのベストプラクティスを考えてみたいと思います。 当は「2016年font-familyの決定版」みたいなタイトルにしたかったのですが、執筆時は8月ですしね。2017年も名乗れません。 2020年と書いたのはWindows7のサポートが切れるのがこの年だからです。 目的はどの環境でも出来る限り近い見た目を目指すものではなく、実行環境で最も読みやすいものを目指すものです。MacよりもWindowsに比重をおいています。 -- 追記 -- Chrome58から一時対応しなくなってしまいましたが、游ゴシックをWindowsChromeでキレイに表示する@font-faceの設定にヒン

    2020年まで使えるfont-familyおすすめゴシック体 - Qiita
    batta
    batta 2017/03/26
  • スマホで触れている間だけhoverする - Qiita

    新たにしっかり書きましたので、長いですが下記記事を御覧ください。 スマホでhoverの動きをSassで矯正させるmixin CSSにhoverを与えたとき、スマホではタップして指(指とは限らない)が離れるときに発火します。 感覚的にはタップした瞬間から離れるときまでの間がhoverであって欲しい。 ググるとjQueryのタッチイベントで、触れた瞬間から離れるまでの間にクラスを与えるという方法で回避しているようです。hoverを指定したものはPCではhover、スマホではタッチイベントになります。 個人的な考えですが、CSSで解決出来るものはCSSで解決したいです。 スマホに擬似クラスhoverを与えてはいけません。 指が離れてから発火してしまうので、スマホはtouchイベント、PCは:hoverなコードを書きます。 コード $('a, input[type="button"], input

    スマホで触れている間だけhoverする - Qiita
  • 1