Question

在一些手机上，汉堡包图标的三个水平线显示为“ X”。在其他手机和台式机中，汉堡包图标正确显示为三条水平线。更具体地说，它适用于所有浏览器上的所有XIAOMI手机。

<Head>代码是

</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

<Body>代码是

<header class="headerbar">
  <div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰Menu</div>
  <div class="site-name">ABCD</div>

我必须插入一个难看的文本“ MENU”。

已附加快照。enter image description here

Answer 1

您看到的符号-看起来像一个X框内的符号-是Android符号，表示“我无法在内置字体中找到此字符。”

您需要为该特定字符（U + 2630）提供一种字体-或“图标字体”。

至于小米为什么不支持…………可能是因为☰是中国的“天堂三字”符号。他们可能未在非中文电话中包含中文字体。

Answer 2

您可以改为使用CSS绘制图标，而不是希望每个客户端都有该字体。

.hamburger {
 display: inline-block;
 }

.hamburger span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
}

<div role="button" class="hamburger">
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 3

如果您的客户没有特定的字体，则可以通过某些方法进行修复：

使用字体CDN 我更喜欢选择使用Font-Awesome
根据要求提供字体

使用CDN字体

由于此方法更合适，因为您不打算包含随机字体，而是要使用字体来显示图标。我建议您使用FontAwesome。它只提供更多有趣和免费的图标来使用。

只需按照他们的start page中的说明进行操作即可：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

要使用“汉堡包”图标，只需执行以下操作：

<header class="headerbar">
  <div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger"><i class="fas fa-bars"></i><span>Menu</span></div>
  <div class="site-name">ABCD</div>

<i class="fas fa-bars"></i>部分包括图标。 fa-bars类用于引用特定的FontAwesome图标。例如，将其更改为fa-caret-down以查看this icon。

请注意，由于您尚未共享其代码，因此不确定是否需要hamburger css类。只是说，此解决方案将包括没有更多CSS的图标。

根据要求提供字体

只需将您的字体上传到wwwroot/font文件夹并将其链接到CSS中：

/*default version*/
@font-face {
    font-family: 'lovelyFont';
    src: url('fonts/lovely_font.eot'); 
    src: 
        local('Lovely Font'),
        local('Lovely-Font'),
        url('fonts/lovely_font.otf') 
        format('opentype');
}
/*bold version*/
@font-face {
    font-family: 'lovelyFont';
    src: url('fonts/lovely_font_bold.eot'); 
    src: 
        local('Lovely Font Bold'),
        local('Lovely-Font-Bold'),
        url('fonts/lovely_font_bold.otf') 
        format('opentype');
    font-weight: bold;
}
/*container element*/
div { font-family: 'lovelyFont', sans-serif; }
/*span elements inside the container div*/
span { font-weight: bold; }

请务必为此签出link。

摘要

我显然会选择CDN / FontAwesome方法，因为它提供了更多的可用性。浏览您想要的任何图标，然后轻松添加它。另一方面，它也为您的项目添加了新的依赖关系，这并不是我们所希望的选择。

如果是这样，请使用方法交付自己的字体。确保它包含您需要的图标，并且一切顺利。如果您确实需要提供自己的字体，则最好使用此解决方案。它也可能包含贵公司徽标的简化版本或其他内容。

我希望这可以为您解决一切。如果您对为什么当前的解决方案不起作用感兴趣，请查看terence eden's Answer。

汉堡图标显示为“ X”的是少数手机，否则在台式机和其他许多手机上都可以。小米特别发现的问题

3 个答案:

使用CDN字体

根据要求提供字体

摘要