Html 为什么W37是学校'；象素化的符号？

为什么这些有用的胶质细胞会被像素化，甚至在自己的网站上？我正在尝试使用这些，并且有相同的问题。请看一个例子

我尝试过旋转、抗锯齿等，但没有效果

如果它像这样显示在自己的网站上-这是一个“功能”？我应该使用其他一些小图标吗？下面是一个例子-正确的一个是一个真正的问题：

---

正如越来越多的人所说，W3学校的

图标非常糟糕。或者至少比其他人更像素化

可能导致此问题发生的一些问题包括：


浏览器版本和/或缓存
错误加载
字形图标
。您可以通过在浏览器中查看控制台来检查这一点
字形图标
的来源不正确

我一直使用并且没有任何问题的源代码是来自的
glyphicons
，您可以通过在标题中添加以下代码来使用这些
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">



注意：现在可能会有更新的版本，您可以找到脚本

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

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

尝试直接从引导中使用Glyph图标！以下是引导图示符“如何使用”页面：
Glipicon参考页就在它的正上方

如果这不能解决问题，我会建议你。我知道fontawesome不是胶质细胞来源，但它非常有用

以下是font awesome页面的链接：

我希望这能解决问题

为什么图标是像素化的

这与学校无关，标题应该改变（我认为）。使用开发人员工具查看提供的链接从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

而且不是从学校来的

所以，任何像这样的评论：W3学校的图标都很糟糕。或者至少比其他人更像素化。。。这是非常错误和误导的。正如其他人提到的，可能是其他原因（图形卡驱动程序、浏览器设置、显示器设置）导致了这种情况。你检查过不同的设备吗

在我的电脑上，我也看到了Firefox和Chrome的区别。Chrome的结果看起来更平滑：


另外：
与此无关
w3cschool glypican
：

对于这个问题，还有一些其他的问题，比如


使用适当的CDN，而不是使用本地文件（js或css）



错误地加载Glypican作为@Death Storm解释了他的答案中的第二点


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



音乐符号
音乐图标：

音乐图标作为链接：

按钮上的音乐图标：
音乐

样式链接按钮上的音乐图标：

我不熟悉w3schools（因为它是一个糟糕的资源，建议使用）

我猜这些都是图像。他们的代码一定是从一个小图像库中提取出来的。这将大大降低DOM的加载速度，我建议您寻找其他资源来获取这些图标

输入SVG的

SVG是可伸缩的矢量图形。它们是永远不会出现的二维图形，也可以与类和伪类进行切换。字体真棒是这些图标的绝佳资源，甚至可以说是书签

关于你指出的被像素化的特定“字形”。这是字体真棒的版本


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

希望这有帮助
 w3schools是任何东西的可怕来源，请到别处寻求指导。我觉得这些glipicon很好，你缺少字体了吗？未正确加载？如果使用chrome，请检查控制台。它可能会说加载资源失败等。您看到的屏幕截图也会很好。W3最常用作W3C的缩写，与W3C无关。不要混淆它们。请检查您的浏览器版本或尝试清除其缓存。
字形图标
看起来很完美。一点也不像素化。回答得很好。与其他答案不同，这实际上涉及可能发生的事情的细节。