2017-01-23 5 views
0

У меня есть страница, которая отлично выглядит на рабочем столе, но выглядит ужасно на мобильных устройствах. Я спросил некоторых людей, и они сказали, что шрифт (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> 
+1

Ариал не шрифт поддерживается в любых мобильных устройствах. Вы должны указать URL-адрес шрифта, используя @ font-face. –

ответ

1

При определении font-family вы должны предоставить по крайней мере один другой шрифт для систем без возврата первого шрифта. Рекомендуется, чтобы ваша последняя декларация font-family была либо serif, либо sans-serif. Вы можете попробовать изменить свой код:

font-family: 'ms pgothic', serif;

Вы также должны объявить charset в <head> вашего HTML. Например:

<meta charset="utf-8">

+0

Большое вам спасибо! – Ren

0

Мобильный телефон не должен иметь встроенный шрифт. Я не вижу ссылку на шрифт в любом месте, поэтому я предполагаю, что он встроен. Попробуйте загрузить шрифт, затем перейдите по ссылке http://www.w3schools.com/css/css3_fonts.asp и узнайте, как интегрировать его на свой сайт. Если вы используете Windows, вы можете просто сделать [WINDOWS_BUTTON + R] и ввести «Шрифты» без кавычек. Затем найдите нужный шрифт и скопируйте его на свой рабочий стол, чтобы затем загрузить его на свой сервер. После этого вы можете выполнить шаги, предоставленные w3schools.com.

0

Предлагаю вам добавить < meta charset = "utf-8" > в голову < >. Символы кодировки гарантируют правильное отображение символов.