Mac VS 上的字体渲染。个人电脑

发布于 2024-12-08 06:16:44 字数 235 浏览 0 评论 0原文

我正在使用 CSS 创建网页，我注意到 Mac（Safari）呈现的字体比 PC（其他浏览器）更宽更粗。

我有十个类别水平显示，固定宽度尺寸为 960px。我使用内边距在每个类别之间留出一些空间，它在 PC 上看起来很棒，但当我使用 Safari 在 Mac 上看到它时，由于字体渲染较宽，它创建了两条线。我知道有一种方法可以破解 IE，但需要使用 Safari。

在 Safari 和其他浏览器上正确显示的最佳方式是什么？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

西瑶 2024-12-15 06:16:44

由于围绕跨平台字体渲染的微妙之处编写 CSS 非常困难，因此我推荐诸如变量填充之类的东西。

ul {
   display: table;
   width: 100%;
}

ul li {
   display: table-cell;
}

jsFiddle。

您选择适用于您正在测试的平台的字体大小，并让 display: table-cell 计算填充。

Since writing CSS around the subtleties of cross platform font rendering is very difficult, I'd recommend something such as variable padding.

ul {
   display: table;
   width: 100%;
}

ul li {
   display: table-cell;
}

jsFiddle.

You choose a font size that works across the platforms you are testing, and let the display: table-cell calculate the padding.

回复收藏 0 原文

两个我 2024-12-15 06:16:44

如果您想保证类别框不跨越两行，则必须固定框的宽度，以便它们的总和始终恰好为 960 像素。

例如：

<div class="container">
  <div class="category">...</div>
  ...(9 more)...
  </div>
<div>

.container { width: 960px; margin: 0 auto; }
.category { width: 86px; padding: 5px; float:left; }

您只需调整它以适应您想要的外观和感觉。除非文本实际上是图像，否则您将无法在所有浏览器和平台上获得完全一致的文本呈现，因此您只需通过定义文本适合您希望其在页面上布局的方式的框来解决这一问题。

If you want to guarantee that your category boxes don't span two lines you must fix the width of the boxes so they always add up to exactly 960px.

For instance:

<div class="container">
  <div class="category">...</div>
  ...(9 more)...
  </div>
<div>

.container { width: 960px; margin: 0 auto; }
.category { width: 86px; padding: 5px; float:left; }

You'll just have to adjust that to fit the look and feel you want. You're not going to get perfectly consistent rendering of text across all browsers and platforms unless the text is actually an image, so you just need to account for that by defining the boxes that text fits into how you want it to layout on the page.

回复收藏 0 原文

~没有更多了~