Le Corps de changer de Police Taille de la Police-Famille avec jQuery
Je suis en train d'utiliser Myriad Pro comme mon principal de la police avec la police Arial et comme un recul de la sorte:
font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif";
Je veux changer la taille de police lors de l'Arial ou Helvetica sont sélectionnés. C'est ce que j'ai en jQuery, mais il ne fonctionne pas:
$(function(){
if ($("body").css("font") == "Arial") {
$("body").css("font", "10px");
};
});
Je vous remercie de votre temps, de l'aide et la générosité 🙂
OriginalL'auteur MrSplashyPants | 2009-08-13
Vous devez vous connecter pour publier un commentaire.
JavaScript n'est pas officiellement pris en charge moyen de détection de polices, mais cette bibliothèque s'agit d'une bonne solution de contournement: http://www.lalit.org/lab/javascript-css-font-detect
À l'aide de ce détecteur, vous pouvez alors utiliser:
Notez également que vous ne devez modifier le
font-size
de la propriété. Si vous modifiez lefont
de la propriété, vous écrasez à la fois votre taille de la police et de la police des familles.OriginalL'auteur Ron DeVera
Tout ce que j'ai lu sur cette page, jusqu'à présent me terrifie! Je suis préoccupé par le scintillement taille du texte, étrange comportement du navigateur, un défaut d'alignement de tous sur la place en raison de conditions de course avec d'autres dimensionnement des éléments basés sur les tailles.
Le problème sous-jacent est que les différentes polices de tailles différentes pour la même taille de point - donc, vous avez besoin de comprendre comment les différentes polices de se comporter pour voir si elles sont à l'intérieur des tolérances acceptables.
je suis venu avec l'followig rapide et sale de police testeur. Il suffit de coller en haut de votre page web à l'intérieur de la
<BODY>
balise, puis cliquez sur un nom de police pour changer de police de caractères. Tester sur Mac + PC + iPad et selon les navigateurs vous avez besoin de soutien. Il suffit de retirer les polices à partir de votre liste de polices qui a considérablement casser votre conception.N'oubliez pas si vous avez des parties de votre page qui est plus critique, essayez d'utiliser la police Arial pour ces articles.
Tester sur JSFiddle.com <-- cliquer sur le bouton rouge les noms de police en bas à droite de la boîte de
OriginalL'auteur Simon_Weaver
très simple fonction jquery :
exemple :
OriginalL'auteur Bahman.Akbarzade
Vous ne pouvez pas détecter quelle est la police utilisée pour le rendu du texte. Le style n'est pas modifiée en fonction de ce que les polices sont disponibles.
Ce que vous pourriez faire est de mesurer la taille d'un élément qui contient du texte, et à partir de ce decuce de police de caractères peut être utilisé pour rendre le texte.
(Pensez aussi que le paramètre de l'utilisateur pour la taille de la police peut également affecter la façon dont elle est rendue.)
OriginalL'auteur Guffa
Ma solution est dans la ligne de ce que @Guffa suggère, mais je voudrais créer un couple de différentes, peut-être même caché si cela fonctionne dans tous les navigateurs, les conteneurs avec le même texte. L'utilisation des classes pour définir la police pour les différentes combinaisons, l'une avec et une sans Myriad Pro. Comparer les hauteurs de ces deux contenants. Si elles sont identiques, alors vous savez qu'il est en cours de rendu avec les polices de secours. Dans Safari 4, j'obtiens 16 et 15, respectivement.
Exemple:
OriginalL'auteur tvanfosson
L'exemple de tvanfosson fonctionne réellement. Vous aurez besoin d'utiliser la largeur plutôt qu'en hauteur mais de comparer les polices de caractères. Vous voudrez aussi de faire le deuxième de la police de la liste des polices arial (ou quelle que soit la chute en arrière de la police que vous voulez utiliser). Après cela, il suffit de comparer les largeurs, et si elles sont les mêmes, vous savez que c'est en utilisant la police arial dans les deux cas:
J'utilise ceci pour éventuellement charger une autre feuille de style qui va utiliser une taille de police différente si segoe n'est pas disponible. La raison étant que segoe UI est trop petite: 11px et les deux autres polices sont trop gros à 12px. Depuis Segoe UI et Lucida Grande ont une meilleure lisibilité, j'essaie d'utiliser ces premiers. En les comparant à arial, je sais qu'ils sont présents sur le système, grâce à tvanfosson.
OriginalL'auteur
Cela fonctionne parfaitement. Je ne sais pas pourquoi le gars qui a posté, elle a choisi de le supprimer..
Edit: NickFitz est correct, car en effet, elle ne fonctionne pas. Je suis bête, très excité et a négligé le mal de changements qu'il avait fait.
Je pense qu'il l'a supprimé car il ne fonctionne pas. Comme votre famille de polices de caractères chaîne de caractères comprend à la fois les polices Arial et Helvetica, indexOf retourne toujours une valeur > -1 et votre taille de police sera toujours mis à 12px. Sur votre page d'exemple, une taille de police à quelque chose de stupide comme 24px dans le CSS, et de voir cette fonction de réinitialisation à 12px. Sinon, il ne fonctionne que dans le navigateur, vous faites des tests, mais je ne pense pas qu'il va travailler dans aucun navigateur. "indexOf" est une méthode de chaîne qui est documenté dans un certain nombre de lieux, tels que developer.mozilla.org/en/Core_JavaScript_1.5_Reference/...
OriginalL'auteur MrSplashyPants