爲什麼文本在移動設備上顯示符號？

我有一個頁面，在桌面上看起來完全不錯，但在移動設備上看起來很糟糕。我問過一些人，他們說，字體（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>

來源

2017-01-23 Ren

Arial不是任何移動設備支持的字體。您應該使用@ font-face爲字體提供網址。 –

當定義font-family，你應該提供系統的至少一個其他的字體沒有第一個字體依傍。建議您最後的font-family聲明爲serif或sans-serif。你可以試着改變你的代碼：

font-family: 'ms pgothic', serif;

你也應該在你的HTML的<head>被宣告charset。例如：

<meta charset="utf-8">

來源

2017-01-23 03:31:26

非常感謝！ – Ren

移動電話不得具有內置的字體。我沒有看到任何地方的字體鏈接，所以這就是爲什麼我猜它是內置的。嘗試下載字體，然後轉到http://www.w3schools.com/css/css3_fonts.asp並瞭解如何將其集成到您的網站中。如果您使用的是Windows，則只需執行[WINDOWS_BUTTON + R]並輸入不帶引號的「字體」即可。然後，搜索您想要的字體，然後將其複製並粘貼到桌面上，然後將其上傳到您的服務器。之後，您可以按照w3schools.com提供的步驟進行操作。

來源

2017-01-23 03:18:43

我建議你將< meta charset =「utf-8」>加入<頭>。字符集meta將確保符號正確顯示。

來源

2017-01-23 03:27:46 hcheung

爲什麼文本在移動設備上顯示符號？

回答

相關問題