web-dev-qa-db-fra.com

Comment réutiliser des familles de polices en CSS pour un chargement plus rapide de CSS

Supposons que j'utilise différentes polices sur ma page, j'utilise 3 polices différentes dans 10 à 20 règles CSS différentes et que je dois utiliser chacune des règles suivantes:

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

Il doit exister un moyen de raccourci pour que ces familles de polices soient répertoriées une seule fois dans CSS, et les règles CSS ne peuvent définir qu'un seul moyen de "pointer" sur la famille de polices à utiliser sans avoir à écrire de longues lignes à chaque fois.

Comment cela peut-il être fait?

cssfontscss3
3
CamSpy

Avec CSS, vous pouvez gérer deux classes et les attacher à votre élément HTML comme suit:

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

.otherClass {
    background-color: white;
}

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

Sinon, vous pouvez chercher une solution telle que SASS . Le langage utilisé à développer est dérivé de CSS => SCSS. À mon avis, cette nouvelle langue bascule parce que vous pouvez:

  • gérer les variables
  • gérer l'héritage des classes CSS
  • ...

C'est cool parce que dans votre cas, vous pouvez utiliser une variable ou utiliser l'héritage de la manière suivante:

$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>

ou

.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

Vous pouvez ajouter une classe à votre feuille de style pour chaque famille de polices, par exemple:

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

Puis utilisez-le comme ceci, avec les autres règles:

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

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

Ou, si vous en avez besoin au milieu d'une phrase:

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

Vous pouvez également définir votre police avec @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');
}

Malheureusement, les types de polices de remplacement (sans-serif, serif, cursive, monospace et fantasy ne semblent pas fonctionner avec local (et j’ai été incapable de trouver une spécification claire à ce sujet), mais cela réduit encore votre CSS à:

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

Une autre astuce pour réduire la taille de votre CSS consiste à combiner tous les sélecteurs utilisant la même police avec une virgule:

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

Au lieu du plus verbeux

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