字体式不适用于字体式特定 @font-face后备

发布于 2025-01-31 15:56:32 字数 1451 浏览 6 评论 0原文

我有一个webfont在正常和斜体之间具有非常不同的宽度。作为后备，我正在为每个尺寸调整而实施Arial。由于某种原因，斜体版本不会显示斜体。

基于输出，第二次后备明显起作用，除了字体风格。也许我错过了什么？

当我从斜体后备中删除字体风格的声明时，它可以使用，但是普通版本继承了同一后备。我该如何解决？

@font-face {
  font-family: 'fallback';
  font-style: normal;
  font-weight: 400;
  src: local(Arial);
  size-adjust: 110%;
}

@font-face {
  font-family: 'fallback';
  font-style: italic;
  font-weight: 400;
  src: local(Arial);
  size-adjust: 125%;
}

div {
  display: flex;
}

p {
  font-size: 2rem;
  font-family: fallback;
  font-style: normal;
  color: green;
}

p + p { 
  font-size: 2rem;
  font-family: fallback;
  font-style: italic;
  color: orange;
}

<div>
<p>Sweet sweet marzipan dolor sweet marzipan candy croissant orange biscuit sugar cream sweet marzipan lollipop apple sprinkles sprinkles cake ipsum. Croissant pastry biscuit pastry sweet cake cream jelly croissant muffin ipsum biscuit tiramisu jelly sweet ipsum sweet dolor vanilla ipsum.</p>
<p>Sweet sweet marzipan dolor sweet marzipan candy croissant orange biscuit sugar cream sweet marzipan lollipop apple sprinkles sprinkles cake ipsum. Croissant pastry biscuit pastry sweet cake cream jelly croissant muffin ipsum biscuit tiramisu jelly sweet ipsum sweet dolor vanilla ipsum.</p>
</div>

原文

I have a webfont that has very different widths between normal and italic. As a fallback I'm implementing Arial with a size-adjust for each. For some reason the italic version does not show up italic.

Based on the output the second fallback clearly works, except for the font-style. Maybe I'm missing something?

When I remove the font-style declaration from the italic fallback it works, but the normal version inherits the same fallback. How do I get around this?

@font-face {
  font-family: 'fallback';
  font-style: normal;
  font-weight: 400;
  src: local(Arial);
  size-adjust: 110%;
}

@font-face {
  font-family: 'fallback';
  font-style: italic;
  font-weight: 400;
  src: local(Arial);
  size-adjust: 125%;
}

div {
  display: flex;
}

p {
  font-size: 2rem;
  font-family: fallback;
  font-style: normal;
  color: green;
}

p + p { 
  font-size: 2rem;
  font-family: fallback;
  font-style: italic;
  color: orange;
}

<div>
<p>Sweet sweet marzipan dolor sweet marzipan candy croissant orange biscuit sugar cream sweet marzipan lollipop apple sprinkles sprinkles cake ipsum. Croissant pastry biscuit pastry sweet cake cream jelly croissant muffin ipsum biscuit tiramisu jelly sweet ipsum sweet dolor vanilla ipsum.</p>
<p>Sweet sweet marzipan dolor sweet marzipan candy croissant orange biscuit sugar cream sweet marzipan lollipop apple sprinkles sprinkles cake ipsum. Croissant pastry biscuit pastry sweet cake cream jelly croissant muffin ipsum biscuit tiramisu jelly sweet ipsum sweet dolor vanilla ipsum.</p>
</div>

分享到QQ

分享到微博

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

发布评论

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

夜未央樱花落 2025-02-07 15:56:32

@font-face SRC是指特定的字体资源。因此，斜体版本应引用Arial斜体字体，例如src：local（arial Italic）

@font-face {
  font-family: 'fallback';
  font-style: normal;
  font-weight: 400;
  src: local(Arial);
  size-adjust: 110%;
}

@font-face {
  font-family: 'fallback';
  font-style: italic;
  font-weight: 400;
  src: local(Arial Italic);   /* <-- THIS HERE */
  size-adjust: 125%;
}

div {
  display: flex;
}

p {
  font-size: 2rem;
  font-family: fallback;
  font-style: normal;
  color: green;
}

p + p { 
  font-size: 2rem;
  font-family: fallback;
  font-style: italic;
  color: orange;
}

<div>
<p>Sweet sweet marzipan dolor sweet marzipan candy croissant orange biscuit sugar cream sweet marzipan lollipop apple sprinkles sprinkles cake ipsum. Croissant pastry biscuit pastry sweet cake cream jelly croissant muffin ipsum biscuit tiramisu jelly sweet ipsum sweet dolor vanilla ipsum.</p>
<p>Sweet sweet marzipan dolor sweet marzipan candy croissant orange biscuit sugar cream sweet marzipan lollipop apple sprinkles sprinkles cake ipsum. Croissant pastry biscuit pastry sweet cake cream jelly croissant muffin ipsum biscuit tiramisu jelly sweet ipsum sweet dolor vanilla ipsum.</p>
</div>

@font-face src refers to a specific font resource. Therefore the italic version should reference to the arial italic font e.g. src: local(Arial Italic)

@font-face {
  font-family: 'fallback';
  font-style: normal;
  font-weight: 400;
  src: local(Arial);
  size-adjust: 110%;
}

@font-face {
  font-family: 'fallback';
  font-style: italic;
  font-weight: 400;
  src: local(Arial Italic);   /* <-- THIS HERE */
  size-adjust: 125%;
}

div {
  display: flex;
}

p {
  font-size: 2rem;
  font-family: fallback;
  font-style: normal;
  color: green;
}

p + p { 
  font-size: 2rem;
  font-family: fallback;
  font-style: italic;
  color: orange;
}

<div>
<p>Sweet sweet marzipan dolor sweet marzipan candy croissant orange biscuit sugar cream sweet marzipan lollipop apple sprinkles sprinkles cake ipsum. Croissant pastry biscuit pastry sweet cake cream jelly croissant muffin ipsum biscuit tiramisu jelly sweet ipsum sweet dolor vanilla ipsum.</p>
<p>Sweet sweet marzipan dolor sweet marzipan candy croissant orange biscuit sugar cream sweet marzipan lollipop apple sprinkles sprinkles cake ipsum. Croissant pastry biscuit pastry sweet cake cream jelly croissant muffin ipsum biscuit tiramisu jelly sweet ipsum sweet dolor vanilla ipsum.</p>
</div>

回复收藏 0 原文

~没有更多了~