web-dev-qa-db-fra.com

Comment incorporer des polices en CSS?

Je veux utiliser certaines polices et je veux que cela fonctionne sans avoir cette police sur l'ordinateur client. J'ai fait ça mais ça ne marche pas:

@font-face {
    font-family: EntezareZohoor2;
    src: url(Entezar2.ttf) format("truetype");
}

.EntezarFont{
    font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}
cssfonts
42
Mohammad

Les lignes suivantes sont utilisées pour définir une police dans css 

@font-face {
    font-family: 'EntezareZohoor2';
    src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Lignes suivantes pour définir/utiliser la police en css 

#newfont{
    font-family:'EntezareZohoor2';
}
50
Suresh kumar

Une des meilleures sources d’information sur ce sujet est l’article Bulletproof @ font-face syntaxe de Paul Irish .

Lisez-le et vous terminerez avec quelque chose comme:

/* definition */
@font-face {
  font-family: EntezareZohoor2;
  src: url('fonts/EntezareZohoor2.eot');
  src: url('fonts/EntezareZohoor2.eot?') format('☺'),
       url('fonts/EntezareZohoor2.woff') format('woff'),
       url('fonts/EntezareZohoor2.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* use */
body {
    font-family: EntezareZohoor2, Tahoma, serif;
}
23
Yannick Blondeau

Passez par http://www.w3.org/TR/css3-fonts/

Essaye ça: 

  @font-face {
        font-family: 'EntezareZohoor2';
        src: url('EntezareZohoor2.eot');
        src: local('EntezareZohoor2'), local('EntezareZohoor2'), url('EntezareZohoor2.ttf') format('svg');
       font-weight: normal;
       font-style: normal;
    }
5
RAN

Essayez ceci link1 , link2 

@font-face {
        font-family: 'RieslingRegular';
        src: url('fonts/riesling.eot');
        src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf')                       format('truetype');
    }
2
Prashobh

Lorsque je suis allé voir les polices Google, ils ne m'ont donné que des fichiers de type True, .ttf, et ils n'ont pas du tout expliqué comment utiliser @ font-face pour les inclure dans mon document. J'ai aussi essayé le générateur de polices Web de font squirrel, qui ne faisait que lancer l'exécution du gif de chargement et ne fonctionnait pas ... J'ai ensuite trouvé ce site - 

https://transfonter.org/

J'ai eu beaucoup de succès en utilisant la méthode suivante:

J'ai sélectionné le bouton Ajouter des polices, en conservant les options par défaut, en ajoutant l'ensemble de mon .ttf que Google m'avait donné pour Open Sans (qui était égal à 10, j'ai choisi de nombreuses options ...).

Puis j'ai sélectionné le bouton Convert.

Voici la meilleure partie!

Ils m'ont donné un fichier Zip avec tous les fichiers de format de police que j'ai sélectionnés, .ttf, .woff et .eot. À l'intérieur de ce fichier Zip, ils contenaient un fichier demo.html sur lequel je venais de cliquer deux fois et une page Web s'ouvrant dans mon navigateur me montrant des exemples d'utilisation de toutes les différentes options de police css, comment les implémenter, etc.

@font-face

Je ne savais toujours pas comment inclure correctement les polices dans ma feuille de style à l'aide de @font-face, mais j'ai alors remarqué que ce demo.html était accompagné de sa propre feuille de style dans le fichier Zip. J'ai ouvert la feuille de style et elle a montré comment importer toutes les polices à l'aide de @font-face. J'ai donc pu rapidement et facilement copier-coller this dans mon projet -

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot');
    src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-BoldItalic.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-LightItalic.eot');
    src: url('fonts/Open_Sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-LightItalic.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-SemiBold.eot');
    src: url('fonts/Open_Sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-SemiBold.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-Regular.eot');
    src: url('fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-Regular.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-Light.eot');
    src: url('fonts/Open_Sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-Light.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-Italic.eot');
    src: url('fonts/Open_Sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-Italic.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot');
    src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-SemiBoldItalic.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot');
    src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-ExtraBold.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot');
    src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-Bold.eot');
    src: url('fonts/Open_Sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-Bold.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Le demo.html avait également sa propre feuille de style intégrée qu'il était intéressant de jeter un coup d'œil, mais je suis habitué à travailler avec les styles et les styles de police une fois qu'ils sont inclus, donc je n'en ai pas beaucoup besoin. Pour un exemple de mise en oeuvre d'un style de police sur un élément html à des fins de référence, vous pouvez utiliser la méthode suivante dans un cas similaire à mien après que @font-face a été utilisé correctement: 

html, body{
    margin: 0;
    font-family: 'Open Sans';
}
.banner h1{
    font-size: 43px;
    font-weight: 700;
}
.banner p{
    font-size: 24px;
    font-weight: 300;
    font-style: italic;
}
0
kiko carisse

J'ai utilisé la police de Ataturk comme ceci. Je n'ai pas utilisé la version "TTF". J'ai traduit la version de police originale (version "otf") en "eot" et "woof" version . Ensuite, cela fonctionne en local mais ne fonctionne pas lorsque j'ai téléchargé les fichiers sur le serveur . J'ai donc ajouté la version "TTF" aussi comme ça. Maintenant, cela fonctionne sur Chrome et Firefox, mais Internet Explorer reste toujours en défense . Lorsque vous avez installé la police "Ataturk" sur votre ordinateur, vous avez également utilisé IE. Mais je voulais utiliser cette police sans installer.

@font-face {
    font-family: 'Ataturk';
    font-style: normal;
    font-weight: normal;
    src: url('font/ataturk.eot');
    src: local('Ataturk Regular'), url('font/ataturk.ttf') format('truetype'), 
    url('font/ataturk.woff') format('woff');
}

Vous pouvez le voir sur mon site ici: http://www.canotur.com

0
Can OTUR