汉堡图标渲染为"X"是一些手机,否则在台式机和许多其他手机上还可以。在小米上特别发现的问题



在一些手机上,汉堡图标的三条水平线呈现为"X"。在其他手机和台式机中,汉堡图标正确地呈现为三条水平线。更具体地说,它在所有浏览器上的所有小米手机上都有。

<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>

我不得不插入一个丑陋的文本"菜单"。

快照附件。在此处输入图像描述

您看到的符号-看起来有点像盒子里的X-是Android符号,表示"我在内置字体中找不到这个字符。">

您需要为该特定字符(U+2630)提供一个字体或图标字体。

至于为什么小米不支持。。。这可能是因为☰是中国"升天八卦"的象征。它们可能没有在非中文手机上包含中文字体。

您可以用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>

如果你的客户端没有特定的字体,有一些方法可以修复它:

  • 使用字体CDN我更喜欢使用字体真棒
  • 根据要求提供字体

使用字体CDN

由于这种方法更适合,因为您不想包含随机字体,但希望使用字体来显示图标。我建议你用FontAwesome。它只提供了更多有趣和免费的图标来使用。

只需将其包含在他们的起始页中:

<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以查看此图标。

请注意,我不确定是否还需要hamburgercss类,因为您还没有共享它的代码。只是说,这个解决方案将包括没有任何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; }

请务必查看此链接。

摘要

我显然会选择CDN/FontAwesome方法,因为它提供了更多的可用性。浏览你想要的任何图标,并轻松地将其包含在内。另一方面,它还为你的项目添加了一个新的依赖项,这通常不是一个理想的选择。

如果是这样,请使用交付自己的字体的方法。确保它包含你需要的图标,你就可以去了。如果您真的需要提供自己的字体,那么这个解决方案将是最好的选择。它也可以包含一个简化版的公司标志或其他什么。

我希望这能为你澄清问题。如果您对当前解决方案不起作用的原因感兴趣,请查看terence eden的答案。

最新更新