Question

为了在Android WebView中使用自定义字体，并让它正确应用粗体或斜体等样式，我编写了以下@font-face规则：

@font-face {
  font-family: 'MyFont';
  src: url('file:///android_asset/fonts/MyFontRegular.ttf');
}
@font-face {
  font-family: 'MyFont';
  src: url('file:///android_asset/fonts/MyFontBold.ttf');
  font-weight: bold;
}
@font-face {
  font-family: 'MyFont';
  src: url('file:///android_asset/fonts/MyFontItalic.ttf');
  font-style: italic, oblique;
}
@font-face {
  font-family: 'MyFont';
  src: url('file:///android_asset/fonts/MyFontBoldItalic.ttf');
  font-weight: bold;
  font-style: italic, oblique;
}

结合应用于某些HTML元素的更多规则，我已正确设置WebView，并且我想要显示的HTML文本确实已正确设置样式。

body {
  font: 11px MyFont;
  color: rgb(59,59,59);
  background-color: #e6e6e6;
  margin: 0;
  border: 0;
}
h1 {
  font: italic bold 15px MyFont;
  color: rgb(59,59,59);
}
h2 {
  font: italic 13px MyFont;
  text-decoration: underline;
  color: rgb(59,59,59);
}
p {
  font: 11px MyFont;
  color: rgb(59,59,59);
  margin: 0;
}

至少，直到Android KitKat推出了新的基于Chromium / Chrome的WebView。在这个版本的系统上测试（4.4.2，真的），我注意到所有文本都呈现为倾斜：即不仅是CSS规则指定的标题，还包括段落。

涉及@font-face规则，我发现只是消除了所有这些规则，但Android KitKat中的第一个WebView能够正确地应用粗体和斜体样式，而在之前的版本中如果没有正确的@font-face设置，操作系统的版本就会对它们一无所知。一旦我重新引入注释掉的@font-face规则，文本就会再次以倾斜的方式显示。

我最终为v19提供了一个不同的CSS资源，但我真的想知道我是否对@font-face的工作方式存在误解，或者责怪KitKat是错误的，更一般地说，这是这种不寻常（至少在我眼中）行为的罪魁祸首。

Android KitKat中的WebView被@ font-face规则搞糊涂了

0 个答案: