Comment incorporer des polices dans le CSS?

Je veux utiliser certaines polices et je veux qu'il fonctionne sans avoir cette police sur l'ordinateur client. J'ai fait cela, mais ne fonctionne pas:

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

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

Embed se réfère à injecter de la police de la source dans le code html, mais pas seulement pour la référence.

InformationsquelleAutor Mohammad | 2012-07-31

css fonts

59

Lignes suivantes sont utilisées pour définir une police en 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 la police en css
```
#newfont{
    font-family:'EntezareZohoor2';
}
```
- la propriété font-family changement de EntezarZohoor2 mais il ne peut pas loadd il
- avez-vous vérifier le chemin d'accès de polices disponibles.
- oh , j'ai juste de la ttf fichier ... est-il nécessaire d'avoir tous les formats ???? comme eot ou etc ???
- oui.. pour les différents navigateur, vous devez utiliser ces formats...
- Recommande fortement fontsquirrel.com/tools/webfont-generator pour la conversion des polices pour le web et la génération de la CSS.
InformationsquelleAutor Suresh kumar

L'une des meilleures source d'information sur ce sujet est Paul Irlandais du À l'épreuve des balles @font-face syntaxe article.

Le lire et vous allez vous retrouver 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;
}

InformationsquelleAutor Yannick Blondeau

5

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

Essayez ceci:
```
  @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;
    }
```
- la propriété font-family changement de EntezarZohoor2 mais il ne peut pas loadd il
- Avez-vous vérifié votre chemin ? si le chemin d'accès est correct, puis vérifier avec n'importe quel autre font-family.
- oui j'ai vérifier le chemin d'accès il était correct , quand j'ai entrez le chemin d'accès dans le navigateur, il commence à télécharger le fichier de police
InformationsquelleAutor RAN
2

Essayer cette link1,link2
```
@font-face {
        font-family: 'RieslingRegular';
        src: url('fonts/riesling.eot');
        src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf')                       format('truetype');
    }
```
- la propriété font-family changement de EntezarZohoor2 mais il ne peut pas loadd il
- vérifiez le chemin d'accès.
- src: url('Entezar2.ttf) format("truetype");
- J'ai changer ur code et corriger le chemin d'accès
- quand j'ai entrez le chemin d'accès dans le navigateur l'adresse de la barre, il va télécharger la police correctement de sorte que le chemin d'accès est correct
- vérifiez votre police de caractères de la famille aussi
- :(( il est correct, mais ne fonctionnent pas :((
InformationsquelleAutor Prashobh
0

J'ai utilisé Ataturk la police de ce genre. Je n'ai pas utilisé "TTF" version. J'ai traduit original version de la police ("otf" version) pour "eot" et "wouf" version.
Il fonctionne en local mais pas à travailler quand j'ai téléchargé les fichiers vers le serveur.
J'ai donc ajouté "TTF" version trop comme cela. Maintenant, Il travaille sur Chrome et Firefox, mais Internet Explorer continue de la défense.
Lorsque vous avez installé sur votre ordinateur "Ataturk" de la police, qui travaillait alors IE aussi. Mais je voulais utiliser cette police sans installation.
```
@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
- Salut à nouveau; j'ai ajouté ci-dessous dans la deuxième "src" de la partie et il travaille maintenant: "url('polices/ataturk.eot?iefix') format('opentype')", Vous pouvez vérifier: http://www.canotur.com
InformationsquelleAutor Can OTUR

Quand je suis allé sur Google polices de tous, ils m'ont police true type des fichiers .ttf et n'a pas expliquer à tous comment utiliser le @font-face pour les inclure dans mon document. J'ai essayé le web générateur de polices de police écureuil trop, qui a juste continué à exécuter le chargement gif et ne fonctionne 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 choisi le Ajouter des Polices bouton, laissant les options par défaut, tous mes .ttf que Google m'a donné pour Open Sans (qui était de l'ordre de 10, j'ai choisi beaucoup d'options...).

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

Heres la meilleure partie!

Ils m'ont donné un fichier zip avec toutes les polices de format de fichiers que j'ai choisie, .ttf, .woff et .eot. À l'intérieur de que fichier zip qu'ils avaient un demo.html fichier que j'ai double cliqué dessus et il a ouvert une page web dans mon navigateur me montrent des exemples d'utilisation de tous les différents css options de police, comment les mettre en œuvre, et à quoi ils ressemblaient, etc.

@font-face

Je ne sait toujours pas à ce point la façon d'inclure les polices dans ma feuille de style correctement à l'aide de @font-face mais ensuite j'ai remarqué que ce demo.html est venu avec sa propre feuille de style dans le zip ainsi. J'ai ouvert la feuille de style et il a montré comment amener dans toutes les polices en utilisant @font-face j'ai donc été en mesure de rapidement et facilement, copier coller ce 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;
}

La demo.html avait aussi sa propre feuille de style inline que c'était intéressant de jeter un oeil à, mais je suis familier avec le travail avec la police de graisses et de styles, une fois qu'ils sont inclus afin que je n'ai pas besoin de beaucoup. Pour un exemple de la façon de mettre en œuvre 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 au mien après @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;
}

InformationsquelleAutor kiko carisse

Vous devez vous connecter pour publier un commentaire.