Retour à Forum de site web

Question sur @ font-face

  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Mars 9th, 2012, 1:47 pm

Jetez un œil à cette police open-type :http://www.fontsquirrel.com/fonts/Quicksand

Avis comment le dernier "style" dans la famille de police est « anéanti ». Comment construire une déclaration @ font-face dans votre css pour accueillir de styles bizarres ces ? J'ai essayé de déclarer que le style de police pour la police de caractères, mais il ne fonctionne pas comme il se doit :
CSS Code: [ Select ]
@font-face {
      font-family: 'Quicksand';
      src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.eot');
      src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.woff') format('woff'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.ttf') format('truetype'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.svg#QuicksandBold') format('svg');
      font-weight: bold;
      font-style: normal;
}
 
@font-face {
      font-family: 'Quicksand';
      src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.eot');
      src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.eot?#iefix') format('embedded-opentype'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.woff') format('woff'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.ttf') format('truetype'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.svg#QuicksandDash') format('svg');
      font-weight: normal;
      font-style: dashed;
}
 
@font-face {
      font-family: 'Quicksand';
      src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.eot');
      src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.woff') format('woff'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
          url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
      font-weight: lighter;
      font-style: italic;
}
 
  1. @font-face {
  2.       font-family: 'Quicksand';
  3.       src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.eot');
  4.       src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
  5.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.woff') format('woff'),
  6.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.ttf') format('truetype'),
  7.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Bold-webfont.svg#QuicksandBold') format('svg');
  8.       font-weight: bold;
  9.       font-style: normal;
  10. }
  11.  
  12. @font-face {
  13.       font-family: 'Quicksand';
  14.       src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.eot');
  15.       src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.eot?#iefix') format('embedded-opentype'),
  16.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.woff') format('woff'),
  17.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.ttf') format('truetype'),
  18.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Dash-webfont.svg#QuicksandDash') format('svg');
  19.       font-weight: normal;
  20.       font-style: dashed;
  21. }
  22.  
  23. @font-face {
  24.       font-family: 'Quicksand';
  25.       src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.eot');
  26.       src: url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
  27.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.woff') format('woff'),
  28.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
  29.           url('../mixins/font-face/fonts/Quicksand/Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
  30.       font-weight: lighter;
  31.       font-style: italic;
  32. }
  33.  

Cela ne fonctionne pas comme vous pouvez vous attendre (plus que probablement parce qu'il est « en pointillés » pas une valeur valide pour font-style). Si j'essaie d'utiliser n'importe quel autre style de la police, la version « en pointillés » est toujours affichée :
CSS Code: [ Select ]
p {
      font-family: Quicksand;
      font-style: normal;
}
 
  1. p {
  2.       font-family: Quicksand;
  3.       font-style: normal;
  4. }
  5.  

Cela finit par affichant le style « dashed » sur tous les points. Donc y a-t-il un moyen valide (ou tout ) façon d'obtenir le css de reconnaître ce style de police ?

C'est évidemment qu'un cas d'exemple, mais les autres problèmes se posent avec différentes polices. Par exemple, Alfredo 2 A des exemples qui ne serait pas accessibles. La police de Alfredo dispose d'une version « Lourde ». C'est assez facile à définir, mais qu'en est-il des « Creux », « Concentré », « Élargi » ou « Large » ? Cant vraiment définir des sous-ensembles d'une famille de polices - vous deviez définir chacun comme une nouvelle déclaration de font-face sous un nouveau nom de famille de polices.
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Mars 9th, 2012, 1:47 pm

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Mars 9th, 2012, 2:13 pm

Je crois que tout ce que vous faites ici est définir les polices de caractères que votre CSS peuvent utiliser. Votre page Web ne savent pas la différence entre les polices réelles, tu pouvais améliorer votre gras normal, votre italique gras et votre italique normal si vous vouliez vraiment. C'est à vous et comment vous définissez les. Vous devrez utiliser des polices-styles CSS valides pour la définition. Si vous avez un style supplémentaire que vous souhaitez utiliser, puis vous devrez faire est de créer une nouvelle famille de polices pour qu'un particulier et mettre le style de police normal (ou ce que vous voulez tant que sa valeur valide).
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Mars 9th, 2012, 2:22 pm

Oui, je pourrais juste utiliser une nouvelle déclaration de la famille de polices ; sa juste pas très intuitif. Ni il s'ensuit l'idée je crois que le W3C allait quand ils ont créé cette déclaration @ font-face. Ce type de compteur intuitif pour ce faire :
CSS Code: [ Select ]
p {
      font-family: 'Alfredo-hollow-condensed-bold';
}
 
  1. p {
  2.       font-family: 'Alfredo-hollow-condensed-bold';
  3. }
  4.  

Au lieu de cela :
CSS Code: [ Select ]
p {
     font-family: 'Alfredo Hollow';
     font-style: condensed;
     font-weight: bold;
}
 
  1. p {
  2.      font-family: 'Alfredo Hollow';
  3.      font-style: condensed;
  4.      font-weight: bold;
  5. }
  6.  


Surtout si quelqu'un d'autre se termine au maintien d'un site sur la route. Comment savent-ils ce qu'il faut utiliser :
CSS Code: [ Select ]
font-family: 'Alfredo-condensed-bold-hollow';
font-family: 'Alfredo-bold-condensed-hollow';
font-family: 'Alfredo-hollow-condensed-bold';
font-family: 'Alfredo-hollow-bold-condensed';
 
  1. font-family: 'Alfredo-condensed-bold-hollow';
  2. font-family: 'Alfredo-bold-condensed-hollow';
  3. font-family: 'Alfredo-hollow-condensed-bold';
  4. font-family: 'Alfredo-hollow-bold-condensed';
  5.  

Pourrait se confondre rapide si vous avez toutes les polices puis 2 plus avec subesets 5 ou plus.
Use your words like arrows to shoot toward your goal.

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 3 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 111 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC