css - Webfont 变音符坏了?

标签 css webfonts

在我使用 OpenSans 网络字体的网页上,它应该能够显示克罗地亚语的变音字符,例如“Š”和“Ç”。 我的问题:只有 变音字符在单词内 出现,而​​如果我使用带有字体粗细的常规字体或者我使用带有字体粗细的 OpenSans-700 并不重要font-weight 粗体或正常。例如:

body {
    font-family: "Open Sans",sans-serif;
    font-weight: bold;
}

在 HTML anchor 标记中正确打印带有粗体字符的单词“ABCČXYŠPQ”,但是“Š”和“Č”有点粗体和/或更暗 - 这两个字符从其他字符中突出。

是否有一些 CSS 可以处理这个问题?

P.S.:反过来看,还有:所有内容都是粗体,但变音字符在 HTML-p-tags 中的单词中是规则的!?怎么了?


编辑:为我们添加一个演示来解决问题

body {
  font-size: 50px;
}

.section-title {
  color: blue;
  margin-top: 20px;
}

.s-weight400 {
  font-family: sans-serif;
  font-weight: 400;
}

.s-weight700 {
  font-family: sans-serif;
  font-weight: 700;
}

.os-weight400 {
  font-family: 'Open Sans';
  font-weight: 400;
}

.os-weight700 {
  font-family: 'Open Sans';
  font-weight: 700;
}
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class='section-title'>SANS SERIF:</div>
    <div class="s-weight400">ABCČXYŠPQ</div>
    <div class="s-weight700">ABCČXYŠPQ</div>
    <div class='section-title'>OPEN SANS:</div>
    <div class="os-weight400">ABCČXYŠPQ</div>
    <div class="os-weight700">ABCČXYŠPQ</div>
  </body>
</html>

最佳答案

好的,谢谢大家回答我的问题。

我现在能够弄清楚:因为我在自己的服务器上托管网络字体,所以我错过了包含来自 Google 的网络字体助手的一些字体扩展。添加此 cyrillic-ext 扩展后,字体显示正确。

这是我自己的错 - 您的代码片段为我指出了正确的解决方案,谢谢!

关于css - Webfont 变音符坏了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58921153/

相关文章:

css - 当字体粗细不可用时,浏览器会做什么?

jquery - 如何在脚本中包含 fabric.js 文件

jquery - 如何使用 jQueryUI 调整大小来强制执行 div 最小大小 - 不允许面板移动?

javascript - 如何使用 javascript 判断浏览器是否支持网页字体?

css - 为什么这些 @font-face 声明没有加载任何东西?

html - 如何使网站上的文字看起来是手写的,但不可读

css - 使用 viewBox 使 svg 图形响应

css - 用于 CSS 动画的 SASS 混合

jquery - 单击按钮时的样式元素

CSS固定位置字体变化