クリエイティブ業界の注目情報や求人情報などを発信する、クリエイターのための総合情報サイトです。
column_general_header

SafariやGoogle Chromeででフォントをさらにきれいに表示する方法

フォントを大きくしたら、太くてきれいではない。細くてきれいなフォントで表示させたい、と思いませんか?

SafariやGoogle Chromeでフォントをさらにきれいに表示する方法を探していたら、Appleのサイトで発見しました。
なぜAppleのサイトは大きいテキストもフォントが細く、きれいに表示されているのか不思議に思ったので、StyleSheetを見てみたら発見したものです。

        .webkit{
        //フォントをきれいに表示
        -webkit-font-smoothing: antialiased;
        //大きくしても一番細く表示
        font-weight:100;
        }

まあ、Webkitを使用しているブラウザのみのようですが、文字を大きく使用した際にフォントサイズと一緒にしていすると きれいに表示されます。 他には

        -webkit-font-smoothing: none;
        -webkit-font-smoothing: antialiased;
        -webkit-font-smoothing: subpixel-antialiased; // Safari での Default値Default値Default値
        

このような指定ができます。 あまり使用することもないと思いますが。

Stylesheetもいろいろと指定方法があり、全てを把握するのは難しいですね。
覚えたとしても使えるブラウザが限られているものも多いので、全てを把握する必要はありませんが。

author

narumasa(なるまさ)

http://narumasa.com


フリーランスのWebクリエイターとして2001年から活動。
レコーディング・エンジニアとして職歴をスタートし、Webの勉強をすべくスクールに通い、デザイン会社のWebデザイナーへ。2001年に退職後、フリーランスのWebクリエイターとして活動しつつ、商品企画会社に入社し、企画プロデューサー・取締役を経て、再びフリーランスに。
現在はフリーランスのWebクリエイターとして数々の大企業のホームページから街の商店のホームページまで、1人で企画からディレクション、デザイン、コーディング、プログラミングまで全てを担当している。

関連記事