font-variant: small-caps;
font-size: 12px;
Firefox:
- 大写字母: 12px
- 小写字母: 10px
Chrome:
- 大写字母: 12px
- 小写字母: 8px
如何在不使用JavaScript的情况下协调两者?
字体变体：小型大写字母；在Chrome或Firefox中显示不同的字体大小
8
- Marin
3
一种方法是使用提供小型大写字母变体的字体系列。除非您使用这样的字体，否则您将被困在处理浏览器自己对小型大写字母的理解上，因为它会自行缩小大写字母。 - Chris Morgan
另外，一旦您开始使用虚假的大写字母，请不要在大写字母周围放置“全尺寸”跨度，而应该在小写字母周围放置“小尺寸”跨度。空格、标点符号和其他符号应保持全尺寸。 - Chris Morgan
似乎这个问题更深层次，我最近将我的网站迁移到另一台服务器上，Chrome根据提供文件的服务器显示不同大小的小写字母。其中一个是带有XAMPP的Windows 7，另一个是带有LAMP架构的Ubuntu。Windows服务器显示的小写字母比Linux版本大1像素。 - Matt K
3个回答
4
Webkit浏览器显示小型大写字母比其他浏览器更小，因此..您可以使用CSS媒体查询轻松地检测出像Chrome和Safari这样的webkit浏览器。尝试使用以下代码：
@media screen and (-webkit-min-device-pixel-ratio:0) {
.some-element-using-small-caps {
font-size: .85em
}
}
- Alfonse Pinto
0
您可以使用CSS hack来针对不同的浏览器进行定制，例如：
@-moz-document url-prefix() {
//firefox specific css here
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
//chrome specific css here - this will also hit other webkit browsers like safari tho
}
在我看来，一种更好的方法是使用一点点 JavaScript 来检测浏览器并在 HTML 元素上设置一个类，然后您可以将该类用作针对各个浏览器的基础。
最终它会看起来像这样：
<html class="firefox">
...
</html>
.firefox .rulename {
//firefox specific css here
}
当然，对于Chrome和其他任何浏览器也是如此
- Martin Jespersen
5
1谢谢，但问题是要找到更好的方法来修复字体大小，而不是如何检测浏览器 :) - Marin
这是更好的方式，因为没有其他方式 :) - Martin Jespersen
我在谈论字体变体的渲染（小写字母与大写字母大小的比例），而不是字体大小。我应该停止使用字体变体并为每个大写字母添加一个<span>吗？ - Marin
2这听起来不是一个好的解决方案，但是所有浏览器都以不同的方式呈现字体，并且一直以来都是如此。用户已经习惯了这种情况，而且说实话，由于大多数用户从未在多个浏览器中访问过网站，所以没有人会注意到。如果我是你，我会忽略它...很抱歉我不能提供帮助。 - Martin Jespersen
@SimonSteinberger：实际上它并不是，但它对此持有一个不同的观点，原因是没有解决方案满足OP的需求。而且，顺便说一下，即使在4年后的今天，仍然没有解决方案，未来也不会有，因为，正如我所尝试解释的，这对终端用户以及开发浏览器的人都没有意义。 - Martin Jespersen
0
我遇到了一个类似的问题，但在iPad上的Safari和桌面上的Safari之间出现了更奇怪的问题，显示16px小型大写字母的比例不同。由于某种原因，iPad上的小型大写字母尺寸更大，有点类似Firefox。
通过调整字体大小或将字距减少半个像素左右，可以缓解这个问题，而无需进一步添加hack。实际上是找到一个微小的中间调整，触发一个浏览器但不影响另一个浏览器，以尽可能接近。
我观察到，在Firefox和IE中，字体往往会比Webkit具有更多的中间大小。例如，在IE和Firefox中，15.6px略微大一些或使用更多的跟踪来调整，而15.5px则不同，15.7px、15.8px等也是如此。几乎每0.1像素都有差异。而在Safari中，差异仅在每0.4px左右被感知。
对于我的小型大写字母情况，它创建了一个溢出问题，我使用了15.5px，这与Safari（桌面版）上的16px几乎没有区别，但将IE和Firefox的小型大写字母尺寸尽可能接近Safari的大小。
- hexalys
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接