CSS: Style des numéros et du texte avec différentes polices de caractères

J'aimerais que tous les chiffres et tous les signes de ponctuation de mon site ont une police de caractères de la famille, tandis que le reste du texte a un autre.
(Exemple: des chiffres et des signes de ponctuation en Arial et le texte dans Tahoma)

Je pourrais le faire pour chacun d'eux, mais ils sont BEAUCOUP, donc ce n'est pas une option.

Est-il un moyen plus facile?

  • Ne peut pas être fait en CSS,
  • si vous utilisez un éditeur de polices et de vous créer une nouvelle police où le nombre de points/nombre sont arial et le texte est tahoma, puis de créer des polices web, et l'utiliser comme un corps de police?
  • En fait, il peut à l'aide de unicode-range mais je ne dirais pas que c'est encore au stade expérimental - developer.mozilla.org/en-US/docs/Web/CSS/unicode-range
  • ou peut-être Tahoma webfont sans nombre et de la punctation ainsi, le navigateur va remplacer par le manque de caractères avec la seconde police énumérés dans la police-famille? (Je ne suis pas sûr que ça marcherait, mais je pense qu'il devrait).
  • yep c'est aussi une bonne solution
  • Comment dois-je faire?
  • Vous pouvez utiliser FontSquirrel qui permet de sélectionner les caractères à inclure dans le générés webfont.

InformationsquelleAutor Bonno | 2014-10-29
  1. 16

    Dans mon cas, le site était à moitié en fait et puis j'avais besoin de changer de police de tous les numéros sur le site. J'ai besoin de changer tous les numéros de l'Oxygène de la police. C'est la façon dont je l'ai fait.

    /* latin-ext */
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: local('Oxygen'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v5/LC4u_jU27qpsdszDEgeU_3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+30-39;
}

    Puis remplacé le font-family: "Poppins", sans-serif; à font-family: "Oxygen", "Poppins", sans-serif;

    La nouvelle font-family style s'appliquera à l'Oxygène de police de tout le texte, mais nous avons limité l'Oxygène polices de caractères à appliquer pour que des chiffres de 0 à 9 à l'aide de la unicode-range de la propriété. pour tous les autres textes, à l'exception des numéros, Poppins police sera appliquée.

    Remarque: U+30-39 est la gamme de 0 à 9 chiffres.

    InformationsquelleAutor vinesh
  2. 0

    Vous pouvez définir un font-family pour votre body c'est à dire Tahoma, puis les envelopper l'un de vos chiffres et signes de ponctuation à l'intérieur d'un <span> balise, par exemple, pour <span class="numbers"></span> et ensuite définir une police de caractères différente de la famille pour la durée de la balise à l'aide de CSS comme ceci:

    .numbers {
     font-family: Arial;
}

    Voici un exemple:

    CSS:

    body {
  font-family: Arial;
}
.numbers {
  font-family: Tahoma;
  color: red;
}

    HTML:

    Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet <span class="numbers">123-456-789</span>. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum
dolor ismet. Lorem ipsum dolor ismet. <span class="numbers">"</span>Lorem ipsum dolor ismet<span class="numbers">"</span>. Hello World<span class="numbers">???????</span>

    • I could do it for each of them, but they are A LOT, so this is not an option. OP Dit que l'ajout d'une durée pour chaque nombre ou la ponctuation n'est pas une option.
    InformationsquelleAutor Fahad Hasan
  3. -1

    La meilleure façon est de créer 2 classes, l'une avec la police Arial et un dans la Tahoma. Et puis assigner la classe de ce que l'élément que vous souhaitez.

    InformationsquelleAutor Florin Pop