Question

我有一个在桌面上看起来完全正常的页面，但在移动设备上看起来很糟糕。我问了一些人，他们说过字体（ MS PGothic ）与移动设备不兼容，但当我把它改成 Arial 时仍然显示奇怪的符号？有办法解决吗？

这是代码！（Live preview）

<!DOCTYPE html>
<html>
<head>
  <title>☆</title>
  <style>
    div.main {
      font-family: "ms pgothic";
      line-height: 110%;
    }
    div.header {
      font-family: "ms pgothic";
      text-align: center;
      line-height: 50%;
    }
  </style>
</head>
<body>
  <div class="header">
    <p><i>stay close to me, don’t go</i></p>
    <p><a href="//example.com">twitter</a>
    <a href="//example.com">tumblr</a>
    <a href="//example.com">curiouscat</a></p>
  </div>
  <div class="main">
    <ul>
      <li>tome (toh-meh)</li>
      <li>they/them, non-binary</li>
      <li>18↓</li>
      <li>february 8, aquarius</li>
      <li>se asian</li>
      <li>socal</li>
      <li><a href="/example.html">personality</a></li>
    </ul>
  </div>
  <div class="header">
    <a href="/byf.html">byf</a>
    <a href="/ids.html">ids</a>
    <a href="/ccs.html">ccs</a>
    <a href="/bl.html">blacklist</a>
    <a href="/i.html">interests</a>
    <a href="/f.html">favs</a>
    <a href="/c.html">credit</a>
  </div>
</body>
</html>

Answer 1

定义font-family时，您应该为没有第一种字体的系统提供至少一种其他字体。建议您上一次font-family声明为serif或sans-serif。您可以尝试将代码更改为：

font-family: 'ms pgothic', serif;

您还应该在HTML的charset中声明<head>。例如：

<meta charset="utf-8">

Answer 2

移动设备不得内置字体。我无法在任何地方看到该字体的链接，这就是为什么我猜它是内置的。尝试下载字体，然后转到http://www.w3schools.com/css/css3_fonts.asp并了解如何将其集成到您的网站中。如果你正在使用Windows，你可以只做[WINDOWS_BUTTON + R]并输入＆＃34;字体＆＃34;没有引号。然后，搜索所需的字体，并将其复制并粘贴到桌面上，然后将其上载到服务器。之后，您可以按照w3schools.com提供的步骤进行操作。

Answer 3

我建议你添加＆lt; meta charset =“utf-8”＆gt;进入＆lt; head＆gt;。 charset meta将确保符号正确显示。

为什么文字在移动设备上显示符号？

3 个答案: