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



我有一个页面在桌面上看起来完全没问题,但在移动设备上看起来很糟糕。我问过一些人,他们说字体(MS PGothic)与移动设备不兼容,但是当我将其更改为Arial时,它仍然显示奇怪的符号?有没有办法解决它?

这是代码!(实时预览)

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

在定义font-family时,你应该为没有第一个字体的系统提供至少一种其他字体。建议您最近一次font-family声明serifsans-serif。您可以尝试将代码更改为:

font-family: 'ms pgothic', serif;

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

<meta charset="utf-8">

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

我建议你在

中添加。字符集元将确保符号正确显示。

相关内容

  • 没有找到相关文章

最新更新