语义-UI :: 可下载字体 - 行距错误

Question

*,

我在加载下面的 html 页面时在我的 Firefox 控制台中收到以下错误（请参阅代码段）。另一方面，Chrome 的控制台什么也没说...>_>

downloadable font: OS/2: bad linegap: -32 (font-family: "Dropdown" style:normal weight:normal stretch:normal src index:0)
source: data:application/x-font-ttf;charset=utf-8;base64,<<...>>
semantic.css:30715:12

但是 dropdown 在两种浏览器上根本不起作用（~不显示 items）。

您知道为什么以及如何解决它吗？

感谢

Semantic-UI js/css - 2.2.10
jQuery v3.2.1

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css'>
    </head>
    
    <body>
        <div class="ui selection dropdown">
            <input name="gender" type="hidden">
            <i class="dropdown icon"></i>
            <div class="default text">Gender</div>
            <div class="menu">
                <div class="item" data-value="1">Male</div>
                <div class="item" data-value="0">Female</div>
            </div>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.js"></script>
    </body>
</html>

我的问题可能与那个相同：https://github.com/Semantic-Org/Semantic-UI/issues/2146

Answer 1

即使您的 HTML 是 Dropdown 模块的有效标记，您仍然需要使用 JavaScript.

对其进行初始化

阅读更多：Dropdown - Initializing Existing HTML

$('.ui.dropdown').dropdown();

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css'>
    </head>
    
    <body>
        <div class="ui selection dropdown">
            <input name="gender" type="hidden">
            <i class="dropdown icon"></i>
            <div class="default text">Gender</div>
            <div class="menu">
                <div class="item" data-value="1">Male</div>
                <div class="item" data-value="0">Female</div>
            </div>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.js"></script>
    </body>
</html>

'Bad Linegap' 错误并未阻止下拉菜单为我工作。

Answer 2

关于控制台错误：

你绝对不是唯一遇到这个问题的人。

坏消息 语义 UI/Fomantic UI* 在这里被破坏（因此错误）。

好消息它似乎无论如何都有效。

问题：

Semantic UI（及其继任者 Semantic UI）使用 data urls to encode a tiny font file for the arrow characters used in the dropdown module. The same technique is also used in the checkbox and accordion modules as well as the step element.

我不太确定，但数据中的字体编码似乎有问题 url。如果您查看 the CSS for dropdown，您可以在文件末尾的 @font-face 指令中看到字体编码。

它基本上只是为每个控件中使用的图标定义自定义字体（例如，下拉输入中的箭头）。我试图将 UTF-8 base64 解码为字体文件，但我的 OS 无法识别该字体。

但除了错误消息之外，您不会有任何问题。

* 语义 UI 在这一点上似乎已经死了（在 v2.4.2）。它已经分叉到 Fomantic-UI，现在是 v2.8.8，有很多修复和积极的开发。不幸的是，它也有同样的问题。

语义-UI :: 可下载字体 - 行距错误

Semantic-UI :: Downloadable font - bad linegap

css

semantic-ui

关于控制台错误：

问题：