web-dev-qa-db-ja.com

CSSの読み込みを速くするためにCSSでフォントファミリを再利用する方法

私のページで異なるフォントを使用するとします。10〜20の異なるCSSルールで3つの異なるフォントを使用し、それぞれで次のような類似したフォントを使用する必要があるとします。

font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

これらのフォントファミリをCSSに1回リストするには、いくつかのショートカット方法が必要であり、CSSルールは、そのような長い行を毎回書き込むことなく、使用するフォントファミリを「ポイント」する方法しかありません。

これをどのように行うことができますか？

cssfontscss3
3
CamSpy

CSSを使用すると、次のように2つのクラスを管理し、それらをHTML要素に添付できます。

.my-font {
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.otherClass {
    background-color: white;
}

<div class="my-font otherClass">An HTML element</div>

それ以外の場合は、 SASS のようなソリューションをご覧ください。開発に使用される言語は、CSS => SCSSから派生しています。私の意見では、次のことができるため、この新しい言語は揺れ動きます。

  • 変数を管理する
  • cSSクラスの継承を管理する
  • ...

あなたの場合、1つの変数を使用するか、次のような継承を使用することができるので、素晴らしいです。

$my-font: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* variable of your font */

.otherClass {
    font-family: $my-font;
    background-color: white;
}

<div class="otherClass">An HTML element</div>

または

.my-font{
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.otherClass {
    @extend .my-font; /* inheritance of the lucidaFont class */
    background-color: white;
}

<div class="otherClass">An HTML element</div>
7
Zistoloen

次のように、各フォントファミリのスタイルシートにクラスを追加できます。

.fontA {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
.fontB {font-family: arial, helvetica, sans-serif;}
.fontC {Georgia, Times, "Times New Roman", serif;}

次に、他のルールとともに、次のように使用します。

<div class="otherRule1 fontA ">
</div>

<p class="otherRule2 fontB">Lorem ipsum dolor sit amet, consectetuer</p>

または、文の途中で必要な場合：

<p>Lorem ipsum dolor, <span class="otherRule10 fontC">consectetuer adipiscing</span> elit.</p>
3
Lee

@font-faceでフォントを定義することもできます：

@font-face {
    font-family: MainFont;
    src: local('Lucida Sans Unicode'), local('Lucida Grande');
}
@font-face {
    font-family: HeadlineFont;
    src: local('Arial'), local('Helvetica');
}
@font-face {
    font-family: SerifFont;
    src: local('Georgia'), local('Times'), local('Times New Roman');
}

残念ながら、フォールバックフォントタイプ（sans-serif、serif、cursive、monospace、およびfantasy）は、localでは機能しないようです（これに関する明確な仕様を見つけることができませんでした）。あなたのCSS：

a {
    font-family: MainFont, sans-serif;
}

CSSのサイズを小さくするもう1つの方法は、同じフォントを使用するすべてのセレクターをコンマで結合することです。

h1, h2, h3, .headline, section > .title {
    font-family: HeadlineFont, sans-serif;
}

より冗長ではなく

h1 {
    font-family: HeadlineFont, sans-serif;
}
h2 {
    font-family: HeadlineFont, sans-serif;
}
h3 {
    font-family: HeadlineFont, sans-serif;
}
…
3
Raphael Schweikert