web-dev-qa-db-fra.com

Utilisation de polices personnalisées à l'aide de CSS?

J'ai vu de nouveaux sites Web qui utilisent des polices personnalisées sur leurs sites (autres que les polices Arial, Tahoma, etc. classiques).

Et ils supportent une belle quantité de navigateurs.

Comment on fait ça? Tout en empêchant les gens d’avoir un accès gratuit au téléchargement de la police, si possible.

cssfont-face
159
Radicate

Généralement, vous pouvez utiliser une police personnalisée en utilisant @font-face dans votre code CSS. Voici un exemple très basique:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Ensuite, trivialement, pour utiliser la police sur un élément spécifique:

.classname {
    font-family: 'YourFontName';
}

(.classname est votre sélecteur).

Notez que certains formats de police ne fonctionnent pas sur tous les navigateurs. vous pouvez utiliser le générateur de fontsquirrel.com pour éviter de trop forcer la conversion.

Vous pouvez trouver un bel ensemble de polices Web gratuites fournies par Google Fonts (possède également des règles CSS @font-face générées automatiquement, pour que vous n'ayez pas à écrire vos propres règles).

tout en empêchant les gens d'avoir un accès gratuit au téléchargement de la police, si possible

Non, il n'est pas possible de styler votre texte avec une police personnalisée intégrée via CSS, tout en empêchant les gens de le télécharger. Vous devez utiliser des images, Flash ou HTML5 Canvas , qui ne sont pas très pratiques.

J'espère que ça a aidé!

336
Chris

Pour vous assurer que votre police est compatible avec plusieurs navigateurs, veillez à utiliser cette syntaxe:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

Tiré de ici .

29
Serj Sagan

Vous devez télécharger le fichier de police et le charger dans votre CSS.

F.e. J'utilise la police Yanone Kaffeesatz dans mon application Web.

Je charge et utilise via

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

dans ma feuille de style.

23
akluth

il y a aussi un outil intéressant appelé CUFON . Il y a une démonstration de son utilisation dans ceci blog C'est vraiment simple et intéressant. En outre, il ne permet pas aux personnes de ctrl + c/ctrl + v le contenu généré.

4
Periback

Si vous ne trouvez aucune police de votre choix sur Google.com/webfonts ou sur fontsquirrel.com, vous pouvez toujours créer votre propre police Web avec une police que vous avez créée.

voici un tutoriel de Nice: Créez votre propre kit de police web face font

Bien que je ne sois pas sûr d’empêcher quelqu'un de télécharger votre police.

J'espère que cela t'aides,

4
Eric Robinson

Aujourd'hui, quatre formats de conteneur de polices sont utilisés sur le Web: EOT, TTF, WOFF,andWOFF2.

Malheureusement, malgré le large éventail de choix, il n’existe pas de format universel qui fonctionne sur tous les navigateurs anciens et nouveaux:

  • EOT est IE seulement,
  • TTF a un support partiel IE,
  • WOFF bénéficie du support le plus large mais n'est pas disponible dans certains navigateurs plus anciens
  • WOFF Le support 2.0 est un travail en cours pour de nombreux navigateurs.

Si vous souhaitez que votre application Web ait la même police sur tous les navigateurs, vous pouvez également fournir les 4 types de police en CSS.

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
2
Hitesh Sahu

Je travaille sur Win 8, utilisez ce code. Cela fonctionne pour IE et FF, Opera, etc.

Allez ici pour convertir votre police ttf en woff avant.

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}
1
Arnold