CSS in Tizen WebView (EFL WebKit) wouldn't honor font-family
Question
I am rendering some HTML using WebView based on EFL WebKit in Tizen 2.4 and 3.0 SDK.
<div className="hexArea" id="hexArea1">
Content
</div>
and corresponding 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;
}
While this works perfectly well on several platforms such as Desktop, Android WebView, iOS WebView, it does not show fixed-font on the Tizen App. I can't seem to set font for anything on the page.
I tried style="font-family: 'monospace'" on the div , I tried to make the CSS just font-family: monospace , but the html on the Tizen WebView just does not seem to honor font-family .
I am trying to display bytes in hex and decimal, and it looks horrible with normal font. Any ideas how to fix it?
EDIT: I even tried <pre> tag but shows in normal font.
1 answers
solution1
2 ACCPTED 2019-06-10 08:43:55
Currently, Fixed font resources seem to be not provided in the Tizen SDK by default. But it's possible to display a fixed-font in app side using CSS @font-face or the Google Font API.
Use CSS @font-face with font resource.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
I think you can add a fixed font resource in your app and load and display the font using CSS @font-face.
Use Google Font API.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.