Comment personnaliser les polices en CSS

Comment personnaliser les polices en CSS : 1. Téléchargez le fichier de police 2. Utilisez la règle "@font-face" et les attributs font-family, src pour introduire le fichier de police, la syntaxe "@font- face{ font-family: 'Nom de la police';src:url('Adresse du fichier');}".

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

Lorsque nous parcourons certains sites Web personnels à l'étranger, nous pouvons toujours trouver des polices très personnalisées, telles que

Mais comme les polices installées sur l'ordinateur sont limitées, nous ne pouvons souvent pas les trouver. nous trouvons la police que nous voulons, nous devons utiliser @font-face fourni par css3 pour implémenter des polices personnalisées.

Mais il est inexact de dire que @font-face est une nouvelle fonctionnalité dans CSS3, car cette fonctionnalité était déjà prise en charge dans CSS2, et le navigateur IE la prenait également en charge à cette époque, mais d'autres navigateurs ne sont toujours pas pris en charge. À l'heure actuelle, tous les principaux navigateurs prennent déjà en charge cette nouvelle fonctionnalité. Comment utiliser cette fonctionnalité spécifiquement ? Regardez le code ci-dessous :

nbsp;html>


    <meta>
    <title>Document</title>
    <style>
    @font-face{
            font-family:myFont;
            src:url(&#39;rajdhani-bold.ttf&#39;)，url(&#39;rajdhani-bold.eot&#39;);
        }
        p{
            font-family: myFont;
        }
    </style>


    <div>
        <p>Ha,those words will be changed.</p>
    </div>

Tout d'abord : nous devons introduire @font-face en CSS et utiliser font-family pour définir le nom de la police que vous souhaitez. Ici, je l'utilise comme myFont (bien sûr, vous pouvez. est également votre police, etc., etc.).

Deuxième : nous devons télécharger les polices que nous aimons. Mais il faut savoir : Firefox, Chrome, Safari et Opera prennent en charge les polices de type .ttf (True Type Fonts) et .otf (OpenType Fonts). Et Internet Explorer 9+ prend en charge la nouvelle règle @font-face, mais ne prend en charge que les polices de type .eot (Embedded OpenType).

Font Squirrel (https://www.fontsquirrel.com/) Ce site Web de ressources de polices gratuites propose de nombreuses polices à télécharger, dont la plupart sont des polices aux formats otf et ttf. Defont.com (http://www.dafont.com/) est également un site Web de ressources de polices gratuit, et le format téléchargé est généralement ttf.

Évidemment, les principales polices téléchargées depuis ces deux sites Web ne sont pas compatibles avec le navigateur IE. À cette fin, nous pouvons utiliser l'outil de conversion de polices TTF to EOT Font Converter (https://www.kirsle.net/wizards/ttf2eot.cgi) pour convertir les polices au format ttf au format eot afin d'être compatibles avec les navigateurs IE.

Mais le meilleur outil de conversion de polices est le générateur fourni par Font Squirrel (https://www.fontsquirrel.com/tools/webfont-generator) Après avoir entré, sélectionnez l'option expert pour réaliser divers formats de polices convertis. entre.

Troisième : après le téléchargement, décompressez le fichier et convertissez-le dans un format eot compatible avec IE via un outil de conversion de polices. Par exemple, utilisez src:url("rajdhani-bold.ttf"), url("rajdhani-bold.eot"); pour importer la police, où l'URL est un chemin relatif ou un chemin absolu.

Quatrièmement : à l'heure actuelle, nous pouvons ajouter nos propres polices personnalisées via font-family en CSS.

Voici le texte avant d'utiliser la police personnalisée :

Voici le texte après avoir utilisé la police personnalisée :

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!