Почему пиксели W3School пикселированы?

Почему эти полезные глипиконы пикселируются, даже на веб-сайте W3Schools? Я пытаюсь использовать их и имею те же проблемы. В качестве примера см. glyphicon-search.

Я пробовал вращаться, сглаживать и т.д. Ничего не работает.

Если это отображается на собственном веб-сайте W3Schools - это "функция"? Должен ли я использовать некоторые другие маленькие значки? Вот пример - правильный вопрос - реальная проблема:

Ответы

Ответ 1

Почему глификоны W3Schools пикселированы?

Это не имеет никакого отношения к W3Schools, и название должно измениться (я думаю). Используйте инструменты разработчика, чтобы увидеть, что предоставленные ссылки загружают источники из CDN:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2

а не из W3Schools.

Итак, любые комментарии вроде: glyphicons из w3schools ужасны. Или, по крайней мере, больше пикселей, чем другие... ужасно ошибочны и вводят в заблуждение. Как отмечали другие, возможно, что-то другое вызывает это (драйвер видеокарты, настройки браузера, настройки монитора). Вы проверили разные устройства?

На моем ПК я также вижу разницу между Firefox и Chrome. Результат Chrome выглядит более гладко:

также: Векторные иконы Roundup | Сравнительное сравнение между популярными иконками

Ответ 2

Нет ничего общего с этим w3cschool glypican:

Некоторые проблемы также существуют для этой проблемы, например,

Используйте правильный CDN вместо использования локального файла (js или css)
Неправильная загрузка глифика как @Deathstorm объясняет второй пункт в его ответе.

Вы можете увидеть эту демонстрацию, которую я скопировал из самой w3cschool, и она поддерживается в большинстве браузеров:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Music Glyph</h2>
      <p>Music icon: <span class="glyphicon glyphicon-music"></span></p>    
      <p>Music icon as a link:
        <a href="#">
          <span class="glyphicon glyphicon-music"></span>
        </a>
      </p>
      <p>Music icon on a button:
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-music"></span> Music 
        </button>
      </p>
      <p>Music icon on a styled link button:
        <a href="#" class="btn btn-info btn-lg">
          <span class="glyphicon glyphicon-music"></span> Music 
        </a>
      </p> 
    </div>
  </body>
</html>

Ответ 3

поскольку больше людей сказали уже, glyphicons из w3schools ужасны. Или по крайней мере больше пикселированных, чем другие.

Некоторые проблемы, которые могут вызвать эту проблему, следующие:

Версия браузера и/или кеш
Неверная загрузка glyphicons. Вы можете проверить это, просмотрев консоль в своем браузере.
Плохой источник, из которого glyphicons берутся.

Источник, с которым я всегда пользовался и не имел никаких проблем, - это glyphicons из bootstrap Вы можете использовать эти glyphicons, добавив следующий код в свой заголовок:

<!-- Fonts and Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

Примечание.. Теперь могут быть более новые версии, вы можете найти сценарии здесь

примерный код загрузки глификона справа внизу:

<i class="fa fa-facebook-square" aria-hidden="true"></i>

Ответ 4

Попробуйте использовать глификоны непосредственно из бутстрапа! Вот страница "Как использовать" в качестве загрузочного глификона: http://getbootstrap.com/components/#glyphicons-how-to-use Ссылка на страницу gliphicon находится прямо над ней.

Если это не решит проблему, я бы предложил шрифтовать. Я знаю, что fontawesome не является источником gliphicon, но он очень полезен.

Вот ссылка на шрифт awesome: http://fontawesome.io/

Надеюсь, это решает проблему!

Ответ 5

Я не знаком с w3schools (потому что это ужасный ресурс, рекомендуется использовать https://developer.mozilla.org/en-US/).

Я предполагаю, что это изображения. Их код должен извлекаться из библиотеки небольших изображений. Это значительно замедлит загрузку вашего DOM, и я бы рекомендовал найти другой ресурс, чтобы получить эти значки!

Введите SVG

SVG - это масштабируемая векторная графика. Они представляют собой двумерную графику, которая никогда не будет пикселизироваться, они также могут переключаться с классами и псевдоклассами. Font-Awesome является фантастическим ресурсом для этих значков, зашел бы так далеко, чтобы сказать закладку!

Относительно конкретного "глифа", который вы указали как пикселированный. Здесь шрифт-удивительная версия!

http://fontawesome.io/icon/info-circle/

Все, что вам нужно, это внедренный код, который они отправляют вам по электронной почте, или вы можете загрузить свою библиотеку удержания (не рекомендуется).

Надеюсь, это поможет!

Ответ 6

Вы можете использовать Шрифт Awesome. Его довольно простой и имеет хорошую коллекцию значков для всех целей.

Ознакомьтесь с руководством по началу работы здесь: Начало работы