Semantic-UI :: 可下载字体 - 错误的 linegap答案

【问题标题】：Semantic-UI :: Downloadable font - bad linegapSemantic-UI :: 可下载字体 - 错误的 linegap
【发布时间】：2017-04-11 15:09:34
【问题描述】：

在加载下面的 html 页面时，我的 Firefox 控制台出现以下错误（请参阅 sn-p 代码）。另一方面，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-UIjs/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

【问题讨论】：

标签： css semantic-ui

【解决方案1】：

即使您的 HTML 是 Dropdown 模块的有效标记，您仍然需要使用 JavaScript 对其进行初始化。

$('.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”错误并没有阻止下拉菜单对我有用。

【讨论】：

我完全忘记了初始化，它工作得更好;-) -thks 不幸的是控制台错误仍然存在，您是否收到相同的错误消息？
我做过...很多次，但我只是习惯于忽略它，因为它没有明显的效果。

【解决方案2】：

关于控制台错误：

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

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

好消息是它似乎仍然有效。

问题：

Semantic UI（及其后续的 Fomantic UI）使用data urls 为dropdown 模块中使用的箭头字符编码一个小字体文件。同样的技术也用于checkbox 和accordion 模块以及step element。

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

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

但是除了错误信息，你不会真的有问题。

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

【讨论】：