这可能吗?基本上,我希望能够设置一个标签,上面写着“在这个标签内,az 变为斜体,但没有其他内容。” 或者同样适用于 az 和 AZ。
2 回答
CSS 旨在设置页面结构的样式,而不是直接设置页面内容的样式。
话虽这么说,有几种解决方法(显然):
- 包裹你想要斜体的字符
<i>,<span>,<em>,<dfn>,<var>,<cite>
- 使用 javascript 搜索所有文本并将这些元素中的任何一个包裹在该文本周围
- 使用服务器端代码将您的文本拆分为一个数组,并使用服务器端的标签格式化文本,以便当内容进入页面时,它已经被格式化。
无法使用 CSS 选择特定字符。
只能以一种棘手的方式使用支持有限的 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。