Шрифт CSS не отображается должным образом на устройствах
Шрифт CSS «JohnDoe» не будет отображаться на других устройствах. Скриншот из моего браузера: johndoe шрифт
Сделал сайт для жены (michelleradztattoo.com). На моем компьютере все выглядит нормально. Когда мы смотрим на сайт на своем телефоне или ноутбуке, текст отображается как обычный шрифт.
Я предполагаю, что поскольку шрифт установлен на моем компьютере, он правильно отображается в браузере (хром). Я переместил CSS в раздел заголовка, без изменений. Я располагал его до и теперь после. Это что-то с "text.css", расположенным в fancybox. Я попытался удалить его из раздела fancybox.
<head>
<meta charset = "utf-8">
<title>Art</title>
<script src = "//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<style type = "text/css">
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
<script src = "https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
<link href = "Styles.css" rel = "stylesheet" type = "text/css">
</head>
Вот код CSS: header {font-family: JohnDoe; font-weight: нормальный; размер шрифта: 4.0vw; высота строки: 0 пикселей; текстовая тень: 0px 0px; отступ текста: 18%; текстовое оформление: нет; цвет: # 000000; } nav {семейство шрифтов: JohnDoe; размер шрифта: 3.5vw; высота строки: 0 пикселей; отступ текста: 18%; текстовая тень: 0px 0px; текстовое оформление: нет; маржа слева: 0 пикселей; нижнее поле: 0,5em; верхнее поле: 0,5em; цвет: # 000000; }
Прохладный. Итак, чтобы использовать собственное семейство шрифтов, вам необходимо загрузить этот шрифт, используя правило @ font-face w3schools.com/cssref/css3_pr_font-face_rule.asp
Потрясающий. Спасибо.
Ответы 4
Проблема здесь в том, что шрифт существует на вашем компьютере, но не на вашем телефоне. Скорее всего, если бы я зашел на ваш сайт на своем компьютере, я бы тоже не увидел шрифт, потому что он не загружен.
В таких случаях вам следует использовать Webfont из примера http://fonts.google.com. Таким образом, каждый сможет увидеть указанный шрифт.
Я думал, что так и будет.
Просто перепубликуйте это для других:
Обязательно определите семейство шрифтов с помощью правила начертания шрифта. https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Как предполагали другие, это связано с тем, что шрифт установлен исключительно на вашем компьютере, и ни одно другое устройство не имеет никаких причин для его установки.
Вы можете использовать Google шрифты, но нельзя сказать, что у них будет каждый шрифт под солнцем.
Я предлагаю и рекомендую вам загрузить файл шрифта на свой хостинг, где находится ваш веб-сайт, чтобы ваш веб-сайт всегда имел доступ к правильному шрифту, независимо от браузера или устройства.
Скорее всего, вам потребуются файлы шрифтов различных типов, подходящие для всех устройств / браузеров. Вы, вероятно, сможете найти и загрузить большинство из этих типов через поиск Google. Однако, если вы не можете, тогда этот Онлайн-конвертер шрифтов довольно хорош для преобразования вашего файла шрифта в другие типы файлов, которые вам нужны.
После того, как ваш шрифт загружен на ваш веб-сайт, вы можете продолжить и использовать @font-faceправило css для определения шрифта.
Найдите время, чтобы прочитать этот Статья о CSS-трюках. Он довольно много объясняет о @font-face, различных типах файлов и о том, что использовать.
Я бы посоветовал вам выбрать "Максимально возможная поддержка браузера" и использовать это:
@font-face {
font-family: 'MyWebFont';
src: url('fonts/webfont.eot'); /* IE9 Compat Modes */
src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('fonts/webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Тогда используйте его как обычно ...
.example p {
font-family: "MyWebFont";
}
Я посетил http://michelleradztattoo.com/ со своего мобильного телефона, и он показывает ваш шрифт. Это может происходить из-за того, что ссылка js находится в заголовке. Не могли бы вы, поместите свою js-ссылку непосредственно перед </body>. И дайте мне знать, какая разница вы получите.
Могу я увидеть, как вы используете шрифт? Например, правило семейства шрифтов (которое, как я полагаю, находится в Styles.css)