Est-il possible de créer un système d'exploitation Mac CSS spécifique à fixer police différence?

Je suis en train de travailler sur un projet avec un designer et il a insisté sur l'utilisation de certains de police spécifique pour les titres et les différents éléments dans la page. Nous sommes donc en utilisant une police de kit pour intégrer avec @font-face.

Il fonctionne parfaitement sur PC (Firefox, IE 7 et 8, Chrome, Safari), mais sur Mac OS (Safari et Firefox), les polices de caractères ne sont pas alignés verticalement, de la même manière. Après recherche sur le Web, je ne trouve pas de solution pour cela à l'exception de "il y a toujours eu des différences entre les navigateurs et plates-formes, vivre avec elle".

Je sais que les polices ne sont jamais rendues exactement le même sur toutes les plateformes, mais cette fois ce n'est pas quelque chose comme la police semble plus gras ou quelque chose comme ça. La police semble comme si il est de base est complètement différent entre Windows et Mac OS X. Mac OS, la police, la taille de 16px est 3px plus élevé que sur PC.

Donc je suis à la recherche d'une solution de sauvegarde : est-il possible de créer un CSS spécialement pour les utilisateurs de Mac OS? Je ne veux pas cibler uniquement Safari Safari PC est ok, et Firefox Mac n'est pas ok.

Ou si vous avez une solution pour corriger la différence de niveau de référence qui n'a pas besoin d'un fichier CSS, je serais heureux de l'entendre.

Merci!

OriginalL'auteur Gabriel | 2011-01-15

  1. 0

    Si la définition explicite de la hauteur de la ligne ne résout pas le problème, vous pouvez vous servir de différentes feuilles de style pour chaque navigateur à l'aide de votre backend et de détecter le système d'exploitation de votre application (par l'intermédiaire de l'agent de l'utilisateur). Vous pouvez aussi faire quelque chose en JS qui font la même chose, mais il y aura probablement un FOUC tout en JS charge de l'pertinentes les styles.

    Paramètre explicite la hauteur de la ligne ne résout pas le problème. Déjà essayé. Reniflant l'agent utilisateur n'est pas mon premier choix, car il est si facile de le modifier, et puis ça ne marcherait pas...
    J'ai choisi celui-ci car la réponse parce que côté serveur browser sniffing est un moindre mal à mon avis. Et il fonctionne toujours si l'utilisateur a utilisé le bizarre "désactiver le javascript".

    OriginalL'auteur coreyward

  2. 12

    J'ai peur que le navigateur/os sniffing est votre seule option. CSS lui-même n'a pas connaissance de l'OS et je n'ai jamais entendu parler d'un css hack qui cible osx spécifiquement.

    C'est le moyen le plus facile pour moi de détecter OSX et ajouter le OSX classe dans le corps du document, de sorte que vous pouvez remplacer les styles css pour OSX spécifiquement.

    if(navigator.platform.match('Mac') !== null) {
    document.body.setAttribute('class', 'OSX');
}

    OriginalL'auteur ChrisR

  3. 0

    Il y a un moyen plus facile. http://rafael.adm.br/css_browser_selector/

    Il détecte le navigateur et l'os et permet de spécifier les classes spécifiques.

    C'est fondamentalement la même que j'ai posté, la seule différence est qu'il ajoute beaucoup de code supplémentaire pour renifler pour les autres os es trop. Dans ce cas, il ne doit cibler OSX qui est beaucoup plus facile résolu avec quelques lignes de code.

    OriginalL'auteur MrMaksimize

  4. 0

    Si vous voulez plus près de la perfection et sans douleur, vous allez avoir à utiliser les polices ou les polices de caractères d'un service en ligne comme Google gratuit de police de la bibliothèque ou de l'un de la pour-payer les bibliothèques de polices. Ces polices ont été conçus et testés pour fonctionner sur le web.

    L'expérimentation et l', y compris les polices pour le navigateur de l'utilisateur de télécharger et d'essayer de s'afficher correctement est très bien, mais ne sera pas parfait et ne le sera pas indolore. Aussi, soyez très prudent avec les restrictions de licences - assurez-vous que les polices de votre concepteur veut utiliser correctement une licence d'utilisation sur le site du client.

    Si vous avez à faire browser sniffing et servir à de multiples feuilles de style, à ce point, je dirais que votre conception est cassé et doit être révisée. Montrer https://fonts.google.com votre concepteur et voir si il aime aucune de celles - ils le travail de la croix-plate-forme dans tous les navigateurs modernes et certaines sont très lisse. EDIT: Oh, et ils sont libres d'utilisation sans soucis de licence.

    À l'origine du contenu des liens externes peuvent être consultées ici: web.archive.org/web/20110124094318/http://code.google.com/...

    OriginalL'auteur jeffszusz