Question

为什么这些有用的gliphicons像素化，甚至在W3Schools自己的网站上？我正在尝试使用这些并遇到同样的问题。请参阅glyphicon-search作为示例。

我尝试过旋转，抗锯齿等。没有任何作用。

如果它在W3Schools自己的网站上显示如此 - 那就是＆＃34;功能＆＃34;？我应该使用其他一些小图标吗？这是一个例子 - 正确的问题是：

Answer 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。

所以，任何评论如：来自w3schools的 glyphicons都很糟糕。或者至少比其他人更像素化...... 非常错误和误导。正如其他人所提到的，也许还有其他因素导致这种情况（显卡驱动程序，浏览器设置，显示器设置）。你检查过不同的设备吗？

使用我的电脑，我也看到了Firefox和Chrome之间的区别。 Chrome的结果看起来更流畅：

还：Vector Icons Roundup | A side-by-side comparison between popular icon fonts

Answer 2

与此w3cschool glypican：

无关

此问题也存在其他问题，例如，

使用适当的CDN而不是使用本地文件（js或css）
错误加载glyphican作为@Deathstorm解释了他答案中的第二点。

您可以看到我从w3cschool本身复制的这个演示，并且在大多数浏览器中都支持它：

＆＃13;

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

＆＃13;

Answer 3

正如更多人所说，来自w3schools的glyphicons非常糟糕。或者至少比其他更像素化。

可能出现此问题的一些问题是：

浏览器版本和/或缓存
错误加载glyphicons。您可以通过在浏览器中查看控制台来查看此内容。
来自glyphicons的不良来源。

glyphicons glyphicons来自bootstrap  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>添加以下代码来使用我来源并且没有任何问题的来源你的标题：

{{1}}

注意：到目前为止，可能会有更新的版本，您可以找到脚本here

以正确方式加载glyphicon的示例代码如下：

{{1}}

Answer 4

尝试直接从bootstrap使用glyphicons！这是bootstrap glyphicon＆＃34;如何使用＆＃34;页面：http://getbootstrap.com/components/#glyphicons-how-to-use gliphicon参考页面正好在它上面。

如果这不能解决问题我会建议fontawesome。我知道fontawesome不是一个gliphicon来源，但它非常有帮助。

以下是字体精彩页面的链接： http://fontawesome.io/

我希望这能解决问题！

Answer 5

我不熟悉w3schools（因为它是一个糟糕的资源，建议使用https://developer.mozilla.org/en-US/）。

我猜的是那些是图像。他们的代码必须从一个小图像库中提取。这会大大减慢DOM的加载速度，我建议找一个不同的资源来获取这些图标！

输入SVG的

SVG是可缩放的矢量图形。它们是永远不会像素化的二维图形，它们也可以通过类和伪类进行切换。 Font-Awesome是这些图标的绝佳资源，甚至可以为它添加书签!!

关于特定的“字形”，你指出它是像素化的。这是font-awesome的版本！

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

您需要的只是他们通过电子邮件发送给您的嵌入式代码，或者您可以下载他们的保留库（不建议使用）。

希望这有帮助！

Answer 6

您可以使用Font Awesome。它非常简单，并且有很多用于各种目的的图标。

在此处查看入门指南：Getting Started

为什么W3School的字形会像素化？

6 个答案: