LG WebOS TV希伯来文显示异常求助（系统版本4.9.7-15）

开发了一个仅包含测试按钮与链接的WebOS应用，按钮上的希伯来文文本在LG WebOS TV（版本4.9.7-15）中显示为乱码符号。尝试设置font-family为arial、Google Sans、Roboto等字体均无效，应用代码如下：

<!DOCTYPE html>
<html>

<head>
    <title>new app</title>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            background-color: #202020;
        }

        div {
            position: absolute;
            height: 100%;
            width: 100%;
            display: table;
        }

        h1 {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            color: #FFFFFF;
        }

 button{
       top:10%;
       left:5%;
       width:100px;
       height:50px;
       position: absolute;
       z-index: 2;
       text-align: center;
       vertical-align: middle;
       horizontal-align: center;
       line-height: 50px;
       background: green; 
       font-family:arial;
       }


    </style>
</head>

<script src="webOSTVjs-1.2.4/webOSTV.js" charset="utf-8"></script>
<script src="webOSTVjs-1.2.4/webOSTV-dev.js" charset="utf-8"></script>
<script type="text/javascript">
    //sample code for calling LS2 API
    webOS.service.request("luna://com.palm.systemservice", {
        method: "clock/getTime",
        parameters: {},
        onSuccess: function (args) {
            console.log("UTC:", args.utc);
        },
        onFailure: function (args) {
            console.log("Failed to getTime");
        }
    });
</script>

<body>
    <div>
        <button onclick="window.location.href='http://192.168.0.17:8080/Garden_on';">
        גינה אור
        </button>   
        
    
    </div>
</body>

</html>

• 添加UTF-8编码声明：你的HTML文档没有明确指定编码，这是乱码的核心原因之一。在<head>标签最顶部添加<meta charset="UTF-8">，确保浏览器正确识别希伯来文的字符编码。

• 嵌入支持希伯来文的字体：LG WebOS TV可能没有预装你指定的Arial、Roboto等字体的希伯来文版本，需要手动引入支持希伯来文的字体文件。推荐使用免费且全面支持希伯来文的Noto Sans Hebrew：

  1. 下载字体文件（比如NotoSansHebrew-Regular.woff2）并放到项目目录中
  2. 在CSS的<style>里添加字体声明：

  @font-face {
    font-family: 'NotoSansHebrew';
    src: url('NotoSansHebrew-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }
  

  3. 修改按钮的font-family为：font-family: 'NotoSansHebrew', Arial, sans-serif;

• 优化RTL文本布局：希伯来文是从右到左（RTL）的语言，给按钮添加direction: rtl;样式，确保文本排版顺序正确，避免显示异常。

修改后的完整代码示例 #

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>new app</title>
    <style type="text/css">
        @font-face {
            font-family: 'NotoSansHebrew';
            src: url('NotoSansHebrew-Regular.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
        }

        body {
            width: 100%;
            height: 100%;
            background-color: #202020;
        }

        div {
            position: absolute;
            height: 100%;
            width: 100%;
            display: table;
        }

        h1 {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            color: #FFFFFF;
        }

        button {
            top: 10%;
            left: 5%;
            width: 100px;
            height: 50px;
            position: absolute;
            z-index: 2;
            text-align: center;
            vertical-align: middle;
            line-height: 50px;
            background: green;
            font-family: 'NotoSansHebrew', Arial, sans-serif;
            direction: rtl;
        }
    </style>
</head>

<script src="webOSTVjs-1.2.4/webOSTV.js" charset="utf-8"></script>
<script src="webOSTVjs-1.2.4/webOSTV-dev.js" charset="utf-8"></script>
<script type="text/javascript">
    //sample code for calling LS2 API
    webOS.service.request("luna://com.palm.systemservice", {
        method: "clock/getTime",
        parameters: {},
        onSuccess: function(args) {
            console.log("UTC:", args.utc);
        },
        onFailure: function(args) {
            console.log("Failed to getTime");
        }
    });
</script>

<body>
    <div>
        <button onclick="window.location.href='http://192.168.0.17:8080/Garden_on';">
        גינה אור
        </button>
    </div>
</body>

</html>

内容的提问来源于stack exchange，提问作者Amos Rohe