web-dev-qa-db-fra.com

Le meilleur moyen d'ajouter une police personnalisée à mon site?

Sur la base de mes recherches, j'ai trouvé qu'il y avait 3 façons de faire cela:

  1. @import url ('https://..........'); en CSS
  2. @font-face {fonta-family: 'myfont'; src: url('myfont.tff');} en CSS
  3. <link rel="stylesheet" href="https://.........." type="text/css"/> en HTML

Quelle méthode offre la meilleure compatibilité entre navigateurs?

Pour le moment, j'utilise la troisième méthode, mais la police de caractères ne fonctionne pas sur certains navigateurs mobiles.

htmlcss
3
MEGA

Quel est le meilleur, police-face, URL d'importation ou lien rel?

Font-face est utilisé à la fois dans le lien rel et dans l'url d'importation, c'est comment les polices internes ou externes sont chargées. Import URL et Link Rel appellent tous les deux des fichiers CSS internes ou externes contenant @ font-face. Il peut également être utilisé en ligne avec <style>. Vous ne pouvez donc pas comparer font-face avec <link> ou @import étant donné que ces deux méthodes l'utilisent.

En ce qui concerne la comparaison des liens et @import, ce n’est pas aussi simple que de dire utiliser celui-ci ou celui-là et dépend de vos exigences. Trouvez plus d'informations à ce sujet ci-dessous.

SOURCE: Différence entre @import et link en CSS

En théorie, la seule différence entre eux est que @import est le mécanisme CSS permettant d'inclure une feuille de style et <link> le mécanisme HTML. Cependant, les navigateurs les traitent différemment, donnant à <link> un avantage certain en termes de performances.

Steve Souders a écrit un article de blog complet comparant l’impact de <link> et de @import (et de toutes sortes de combinaisons de celles-ci) appelé " n’utilisez pas @import ". Ce titre parle assez bien pour lui-même.

Yahoo! le mentionne également comme l'une de ses meilleures pratiques en matière de performances (co-écrit par Steve Souders): Choisissez <link> sur @import

En outre, l’utilisation de la balise <link> vous permet de définir feuilles de style "préférées" et alternatives . Vous ne pouvez pas faire cela avec @import.

Les polices ne fonctionnent pas sur la plupart des navigateurs

Pour comprendre pourquoi les polices ne fonctionnent pas, vous devez connaître les limites de votre codage.

  • Link Rel existe depuis de très nombreuses années et est largement supporté par la plupart des navigateurs après IE8, voir Puis-je utiliser: Link Rel .
  • Font Face existe également depuis de nombreuses années et est supporté par la plupart des navigateurs après IE8, voir Puis-je utiliser: @ Font-face .
  • L'importation existe également depuis de nombreuses années! et est pris en charge dans la plupart des navigateurs après IE8, voir Documents MDN Mozilla sur @import .

En règle générale, <link rel> est la méthode la plus rapide et la méthode la plus courante, les polices Google, Adobe Typekit, utilise cette méthode par défaut. Si des polices ne fonctionnent pas sur certains périphériques, il est fort probable que vous ne fournissiez pas assez de types de polices différents.

Types de polices

Il est recommandé de servir vos polices au format EOT, WOFF, SVG, TTF, OTF et WOFF2, car tous les navigateurs ne les prennent pas en charge. Votre premier point d’appel doit être d’assurer l’abondance des formats.

3
Simon Hayter

L'option 2 est très standard et l'option 3 est requise.

Les fichiers CSS prennent en charge les polices Web dans tous les navigateurs en nommant font-family déclarant le fichier source.

Faites l’option trois d’abord, puis copiez ce format dans votre .css

@font-face { font-family: "Lato Hairline"; src: url('/assets/fonts/Lato-Hai.ttf'); }

Ou vous pouvez copier cela dans votre <style> @font-face </style> dans votre fichier .html

Le meilleur moyen pour moi est de l'inclure dans mon fichier .css et de le lier dans mon en-tête.

0
jyxOS