html - css 仅在标签内强制某些字符使用斜体？

Question

这可能吗？基本上，我希望能够设置一个标签，上面写着“在这个标签内，az 变为斜体，但没有其他内容。” 或者同样适用于 az 和 AZ。

Answer 1

CSS 旨在设置页面结构的样式，而不是直接设置页面内容的样式。

话虽这么说，有几种解决方法（显然）：

1. 包裹你想要斜体的字符<i>,<span>,<em>,<dfn>,<var>,<cite>
2. 使用 javascript 搜索所有文本并将这些元素中的任何一个包裹在该文本周围
3. 使用服务器端代码将您的文本拆分为一个数组，并使用服务器端的标签格式化文本，以便当内容进入页面时，它已经被格式化。

无法使用 CSS 选择特定字符。

Answer 2

只能以一种棘手的方式使用支持有限的 CSS3 功能（WebKit 浏览器），即unicode-range限制in 。@font-face以下在我的计算机上的 Chrome 和 Safari 中有效，但很可能不适用于您的计算机：

@font-face {
  font-family: funny;
  src: local("Times New Roman");
}
@font-face {
  font-family: funny;
  src: local("Times New Roman Kursivoitu");
  unicode-range: U+61-7A;
}
p { font-family: funny; }

如果您可以在正在使用的字体系列中找出特定斜体字体（字体）的特定名称，它也可能在您的计算机上工作。也许替换可能会这样做Italic，Kursivoitu但关键是特定名称因系统而异，即使字体系列名称（如 Times New Roman）是相同的。

这将是一个丑陋的 hack，因为它会使浏览器使用斜体字体，即使font-style是默认字体 ( normal)。

您可以将此想法与可下载字体一起使用，从那时起您可以控制其名称。我使用FontSquirrel的 Cardo 字体系列对此进行了测试，稍微编辑了交付的 CSS：

@font-face {
    font-family: 'Cardo';
    src: url('Cardo104s-webfont.eot');
    src: url('Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('Cardo104s-webfont.woff') format('woff'),
         url('Cardo104s-webfont.ttf') format('truetype'),
         url('Cardo104s-webfont.svg#CardoRegular') format('svg');
}
@font-face {
    font-family: 'Cardo';
    src: url('Cardoi99-webfont.eot');
    src: url('Cardoi99-webfont.eot?#iefix') format('embedded-opentype'),
         url('Cardoi99-webfont.woff') format('woff'),
         url('Cardoi99-webfont.ttf') format('truetype'),
         url('Cardoi99-webfont.svg#CardoItalic') format('svg');
    unicode-range: U+61-7A;
}
p { font-family: Cardo; }

我只是将特定的字体名称CardoRegular和CardoItalic此处更改为相同的名称，Cardo并将该名称用于一个元素，其中字母 a-z 应以斜体显示，而其他字符在常规 Cardo 中显示。

要使字母 a–z 和 A–Z 变为斜体，您可以将限制编辑为

unicode-range: U+41-5A, U+61-7A; 

@font-face在支持但不支持限制的浏览器上unicode-range，这个诡计回退到在整个元素中使用常规 Cardo。