La feuille de style CSS et des polices personnalisées

Très bien, je suis un CSS débutant alors nous y voici. Dans un modèle que j'utilise il y a une feuille de style

tête {font-family:Verdana; font-size:16px; color:#000000;}

corps
{font-family:Verdana; font-size:12px; color:#ffffff}

un
{color:#ff0000; font-family:Verdana; font-size:30px;}

bluetext
{color:#0000ff;}

infobulle{font-family:Verdana; font-size:11px;
color:#ffffff;}

Donc je me dis que c'est de déterminer ce que la police devrait être pour chacun de ces sections. Que dois-je faire si je veux utiliser une police personnalisée au lieu de Verdana pour l'ensemble de ces sections? J'ai l' .ttf fichier, mais je ne sais pas quoi faire d'autre.

Merci d'avance!

  • double possible de Comment utiliser notre police personnalisée sur notre site web
  • Vous n'avez pas à déclarer à la police-famille, la couleur, etc. pour chaque classe. Ils seront héritées de leurs éléments parents, le choix de la police de la famille et de la couleur n'est nécessaire pour le corps de l'élément, et les éléments que vous souhaitez remplacer. Aussi, le head section d'une page ne contient que des choses comme le titre de la page, les feuilles de style, etc., mais rien de ce qui est visible sur la page, de sorte que le style qu'il ne fait rien. Enfin, vous devriez regarder dans les classes et leur notation dans le css, les classes bluetext et tooltip devrait être .bluetext et .tooltip.
InformationsquelleAutor user1323153 | 2012-04-24
  1. 7

    D'abord générer des polices pour tous les navigateurs comme woff pour Mozilla, eot pour IE etc. Ainsi, vous pouvez générer à partir de http://www.fontsquirrel.com/fontface/generator & http://www.font2web.com/ .
    Ensuite, écrivez @font-face dans votre CSS.

    @font-face {
  font-family: 'font';
  src: url('font.eot?') format('eot'), url('font.woff') format('woff'), url('font.ttf') format('truetype');
}
body{
  font-family: 'font';
  color:#fff;
font-size:12px;
}
.head {font-size:16px; color:#000000;}
a {color:#ff0000; font-size:30px;}
.bluetext {color:#0000ff;}
.tooltip{font-size:11px;}
    InformationsquelleAutor sandeep
  2. 2

    Vous devez utiliser font-face pour que. La mise en œuvre de base est:

    @font-face {
    font-family: CustomFontName;
    src: url(http://path-to/customfont.ttf);
    font-weight:400;
}

    Puis il suffit de l'utiliser comme n'importe quelle autre police dans toute autre règle de style.

    p {
    font-family: CustomFontName, Helvetica, Arial, sans-serif;
}
    InformationsquelleAutor szabcsee
  3. 0

    Vous devez l'utiliser dans votre fichier css :

    @font-face {
    font-family: your_font;
    src: url('your_font.ttf');
}

    Afin de travailler sur IE, vous devez l'exporter une autre version de votre police .eot extension, et ajouter une autre propriété src.

    Edit:
    Voici un lien utile sur l'utilisation de @font-face : http://www.webistrate.com/css3-custom-fonts-using-font-face/

    InformationsquelleAutor gabitzish
  4. 0

    Juste d'abord installer la police sur votre serveur/system/root.

    & puis appliquer comme ceci dans votre css 

    @font-face {
        font-family: 'myriadproregular'(i.e.custom font name);
        src: local('myriadproregular'), url('myriadproregular.ttf') format("truetype");
    }
    and  if you want more than one font you can do the same
    @font-face {
        font-family: 'myriadprocond';
        src: local('myriadprocond'), url('myriadprocond.ttf') format("truetype");
    }
    @font-face {
        font-family: 'myriadprosemibold';
        src: local('myriadprosemibold'), url('myriadprosemibold.ttf') format("truetype");
    }

    suffit d'utiliser le nom de la police à l'endroit où vous souhaitez utiliser
    comme 

    p
{
font-family:"custom font name"

}
    InformationsquelleAutor Jack