Tizen WebView (EFL WebKit) 中的 CSS 不支持 font-family答案

【问题标题】：CSS in Tizen WebView (EFL WebKit) wouldn't honor font-familyTizen WebView (EFL WebKit) 中的 CSS 不支持 font-family
【发布时间】：2019-06-08 02:46:25
【问题描述】：

我在 Tizen 2.4 和 3.0 SDK 中使用基于 EFL WebKit 的 WebView 渲染一些 HTML。

<div className="hexArea" id="hexArea1">
  Content
</div>

和相应的CSS：

.hexArea {
  position: relative;
  height: 95%;
  padding: 3px;
  white-space: pre;
  text-overflow: clip;
  overflow: auto;
  border: 1px solid #0F0F0F;
  color: #0F0F0F;
  font-family: "Lucida Console", "Courier New", Courier, monospace;
}

虽然这在桌面、Android WebView、iOS WebView 等多个平台上运行良好，但它不会在 Tizen 应用程序上显示固定字体。我似乎无法为页面上的任何内容设置字体。

我在div 上尝试了style="font-family: 'monospace'"，我尝试将CSS 设为font-family: monospace，但Tizen WebView 上的html 似乎并不支持font-family。

我正在尝试以十六进制和十进制显示字节，而普通字体看起来很糟糕。任何想法如何解决它？

编辑：我什至尝试了<pre> 标签，但以正常字体显示。

【问题讨论】：

标签： html css webview tizen tizen-native-app

【解决方案1】：

目前，Tizen SDK 似乎默认不提供固定字体资源。但是可以使用 CSS @font-face 或 Google Font API 在应用程序端显示固定字体。

使用 CSS @font-face 和字体资源。

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

我认为您可以在应用中添加固定字体资源，并使用 CSS @font-face 加载和显示字体。
使用 Google 字体 API。

https://developers.google.com/fonts/docs/getting_started

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Roboto Mono">
    <style>
      .hexArea {
        font-family: "Roboto Mono";
      }
    </style>
  </head>
  <body>
    <div>normal font:1234567890</div>
    <div class="hexArea">fixed-font:1234567890</div>
  </body>
</html>

【讨论】：

您好，谢谢..我现在无法检查..会尽快检查并回复。