Question

我正在使用基于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 App上它不显示固定字体。我似乎无法为页面上的任何内容设置字体。

我在style="font-family: 'monospace'"上尝试过div，我试图将CSS简化为font-family: monospace，但是Tizen WebView上的html似乎并不适合font-family。

我正在尝试以十六进制和十进制显示字节，并且使用常规字体看起来很恐怖。有任何解决方法的想法吗？

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

Answer 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>

Tizen WebView（EFL WebKit）中的CSS不适合字体家族

1 个答案: