web-dev-qa-db-fra.com

Pour utiliser la police locale en HTML à l'aide de la face de la police

J'essaie d'utiliser la police locale pour appliquer des styles en html, ci-dessous est le code.La police n'est pas appliquée pour l'élément utilisé de la classe harlow

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: myFirstFont;
    src:local("C:\Users\Website\fonts\Harlow_Solid_Italic.ttf");
}

.harlow{
    font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>
htmlcssfont-face
7
anavaras lamurep

J'ai fait les changements suivants et j'ai obtenu le résultat

  • Guillemets pour la famille de polices
  • Utilisation d'URL au lieu de local
  • Changement de "\" en "/"

Remarque: L'utilisation de la fonction local css génère une erreur dans la console du développeur indiquant que la ressource n'est pas chargée. Voir le code modifié ci-dessous.

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: "myFirstFont";
    src: url("C:/Users/Desktop/Website/fonts/Harlow_Solid_Italic.ttf");
}

.harlow {
    font-family: "myFirstFont";
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>
8
anavaras lamurep

Utilisez le chemin correct pour le fichier. votre chemin ne fonctionne pas sur l'hôte. parce que votre hôte n'a pas de lecteur "c:/..." ou quelque chose comme ça. afin que vous puissiez utiliser

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: myFirstFont;
    src:url("/fonts/Harlow_Solid_Italic.ttf");
}

.harlow{
    font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>
1
MN. Vala