在CSS中将字体家族设置为特定符号 [英] Set font-family to specific symbols in CSS

问题描述

在我的网站上，我使用非标准的西里尔字母.看起来不错，但是在某些特殊符号上却有问题，例如-引号(由于某种原因，开头和结尾的引号看起来有所不同).

On my website i use non standard cyrillic font. It looks well but it have problems with some special symbols, for example - quotes (for some reason opening and ending quote look different).

我想使用CSS为特定符号设置字体系列.有可能吗?

I would like to set font-family for specific symbols using CSS. Is it possible?

推荐答案

您可以使用unicode范围@font-face规则

You can manage this using a unicode range @font-face rule

MDN参考

我不确定此演示在Snippet中的效果如何，这取决于您是否安装了指定的字体.但是，总的来说，是这样的:

I'm unsure as to how well this demo will work in a Snippet as it will depend on you have the designated font installed. However, in general, it's something like this:

@font-face {

  font-family: 'Algerian';
  src: local('Algerian');
  unicode-range: U+022-026;

}

div {
  font-size: 4em;
  font-family: Algerian, sans-serif;

}

div {
  text-align: center;

}

p {
  font-size: 72px;

}

<div>
  <p>" Lorem & Ipsum "</p>
</div>

在这种情况下，我将规则应用于打开&闭引号和&"号.

In this instance I've applied the rule to open & closed quotes and the ampersand.

支持: CanIUse.com

但是对于Firefox:

For Firefox though:

可以使用layout.css.unicode-range.enabled标志在Firefox中启用支持

Support can be enabled in Firefox using the layout.css.unicode-range.enabled flag

这篇关于在CSS中将字体家族设置为特定符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！