@ font-face et font-size

Question

L'idée dans ce qui suit est le premier @ font-face est pour Firefox, le second pour IE, et Arial pour toute autre chose qui ne peut pas donner un sens aux deux premiers. Tout fonctionne sauf que je veux donner une taille différente dans le cas d'Arial, et je n'ai pas compris la syntaxe pour le faire.

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

@font-face { 
    font-family: TribecaIE; 
    src: url("Tribec0.eot"); 
} 

BODY 
{ 
    FONT-FAMILY: Tribeca, TribecaIE, Arial; font-size: 195%; 
} 

Answer 1

Ce n'est pas pris en charge par des règles CSS normales ..

je crois que vos options sont

• la propriété font-size-adjust de css
javascript
• (jQuery), et le contrôle pour la police actuelle pour voir laquelle des trois est efficace et ajuster la taille de la police en conséquence .. http://www.w3.org/TR/css3-fonts/#font-size-adjust (vous devriez aussi avoir un coup d'oeil à lahttp://www.modernizr.com/)

Answer 2

BODY 
{ 
    FONT: 140% Arial; 
    FONT: 195% Tribeca,TribecaIE; 
} 

Answer 3

Je ne crois pas que ce soit possible avec css seul; nous aurons probablement besoin d'utiliser javascript. Tout ce que nous voulons faire est de spécifier une taille de police différente si Arial est la police active. La détection de la police active n'est pas vraiment simple, mais voici une méthode qui fonctionnera dans notre cas particulier. Nous pouvons créer un élément temporaire contenant des caractères Arial et en mesurer la largeur, puis créer un deuxième élément contenant des caractères sans spécifier de police (afin que la police "active" soit utilisée par défaut) et comparer les largeurs. Cela ne nous indiquera pas quelle police est actuellement active, mais peut indiquer si l'une des polices incorporées a été chargée avec @ font-face car elles n'auront certainement pas la même largeur que Arial. Si les largeurs des deux éléments ne sont pas égales, nous savons que Arial n'a pas pu charger, et donc nous ajusterons seulement la taille de la police si les largeurs sont égales.

Même si le navigateur ne peut pas charger la police Arial, notre test est toujours fonctionnel, car lorsque nous spécifions Arial pendant le test, le navigateur utilise par défaut la même police que pour le second élément. Les deux éléments auront toujours la même largeur si le navigateur ne peut pas charger les polices incorporées avec @ font-face.

Si quelqu'un voudrait que j'illustre davantage avec du code, je serai heureux d'écrire le javascript.

Answer 4

Je crois qu'il est ce (proche de ce que vous avez):

@font-face { 
    font-family: Tribeca; 
    src: url("Tribeca.ttf"); 
} 

@font-face { 
    font-family: Tribeca; 
    src: url("Tribeca.eot"); 
} 

body { 
    font-family: Tribeca, Arial; 
} 

IE ne saura pas comment ouvrir le ttf, donc il ne sera pas la peine. Ensuite, il ouvrira le eot. Ensuite, vous spécifiez simplement la police par le nom donné dans la déclaration body.

Answer 5

Ciblez vos navigateurs en sachant lequel lit le type de déclaration. Commentaire conditionnel charge différents appels CSS. Ensuite, vous pouvez spécifiquement dire à chacun de faire quelque chose de différent par règle.

Il y a également Typekit

Answer 6

@font-face { 
    font-family: 'Tribeca'; 
    src: url(Tribeca.eot); 
    src: local('Tribeca'), url(Tribeca.ttf) format('truetype'); 
    } 

MSIE ignorera la dernière ligne cos il ne comprend pas la règle format. et oui comme indiqué par porneL ci-dessus, format() devrait aller dans la propriété src.

local() permet aux navigateurs de support d'utiliser le fichier de police local si l'utilisateur l'a au lieu de le télécharger depuis votre serveur (et fait probablement IE ignorer la ligne aussi).

comme pour l'ajustement de la taille de la police, comme indiqué par Gaby: CSS 3 font-size-adjust. mais il semble que ce n'est pas encore largement supporté.

Answer 7

Pour annuler la duplication de code avec @ font-face, vous pouvez le faire via le serveur. Si vous utilisez par exemple un urlrewrite, détecter UA, si c'est IE - retourner le fichier avec l'extension .eot, si c'est un navigateur normal - ttf.

Pour moi, ça marche très bien.

Et pour ce cas, vous ne devriez pas changer vos fichiers CSS, il suffit d'avoir 2 fichiers: .ttf & .oet.

Answer 8

Bien que ce soit contre les bonnes pratiques normales lors de l'utilisation de CSS, vous pouvez utiliser la déclaration !important dans votre CSS conditionnel. Par exemple, nous créons deux feuilles de style: celle par défaut, qui aura une section pour les styles spécifiques à Firefox et une feuille de style Internet Explorer.

Puis, en utilisant la méthode <link rel="" /> standard stylesheets importation:

<link rel="stylesheet" href="normal/css/file.css" type="text/css" media="screen, projection"> 

<!--[if IE]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]--> 

Dans le 'default' stylesheet, nos styles de Firefox sont enveloppées dans les domaines suivants:

@-moz-document url-prefix() { 

    #my-id { font-size: 100%; } 

} 

Cela fonctionne parce que le @-moz-document url-prefix() section est comment Firefox addons style pages Web. Ainsi, les autres navigateurs ne le comprennent pas et donc l'ignorent.