Vous utilisez des polices personnalisées avec CSS?

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

Et ils prennent en charge une bonne quantité de navigateurs.

Comment fait-on ça? Tout en empêchant également les gens d'avoir un accès gratuit pour télécharger la police, si possible.

De manière générale, vous pouvez utiliser une police personnalisée en utilisant @font-facedans votre 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*/
}

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

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

( .classnameest votre sélecteur).

Notez que certains formats de polices ne fonctionnent pas sur tous les navigateurs; vous pouvez utiliser le générateur de fontsquirrel.com pour éviter trop d'efforts de conversion.

Vous pouvez trouver un bel ensemble de polices Web gratuites fournies par Google Fonts (a également des @font-facerègles CSS générées automatiquement , vous n'avez donc pas à écrire les vôtres).

tout en empêchant également les gens d'avoir un accès gratuit pour télécharger la police, si possible

Non, il n'est pas possible de styliser 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 cela a aidé!

Pour vous assurer que votre police est compatible avec tous les navigateurs, assurez-vous d'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'); 
}

Pris d' ici .

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

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

Je charge et l'utilise via

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

dans ma feuille de style.

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

Malheureusement, malgré le large éventail de choix, il n'y a pas un seul format universel qui fonctionne sur tous les anciens et nouveaux navigateurs:

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

Si vous souhaitez que votre application Web ait la même police dans tous les navigateurs, vous souhaiterez peut-être 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;
  }

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

voici un joli tutoriel: Créez votre propre kit de polices web

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,

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

Je travaille sur Win 8, utilisez ce code. Cela fonctionne pour IE et FF, Opera, etc. Ce que j'ai compris est: la police woff est légère et courante sur les polices Google.

Allez ici pour convertir votre police ttf en woff avant.

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

Tout d'abord, vous ne pouvez pas empêcher les gens de télécharger des polices sauf si c'est la vôtre et cela prend généralement des mois. Et cela n'a aucun sens d'empêcher les gens d'utiliser des polices. Beaucoup de polices que vous voyez sur les sites Web peuvent être trouvées sur des plates-formes gratuites comme celle que j'ai mentionnée ci-dessous.

Mais si vous souhaitez implémenter une police dans votre site Web, lisez ceci: Il existe un moyen assez simple et gratuit d'implémenter des polices dans votre site Web. Je recommanderais les polices Google car elles sont gratuites et faciles à utiliser. Par exemple, j'utiliserai la police Bangers de Google. ( Https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) Voici à quoi cela ressemblerait: HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}