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的字形图标很糟糕。或者至少比其他网站更加像素化...”这样的评论都是错误和误导性的。正如其他人所提到的，可能有其他原因导致这种情况（显卡驱动程序、浏览器设置、显示器设置）。您检查过不同的设备了吗？
对于我的电脑，我也看到Firefox和Chrome之间的差异。Chrome的结果看起来更加平滑：
这与w3cschool glyphican无关：
还有其他一些问题，比如：
使用正确的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>正如许多人已经说过的那样，来自w3schools的glyphicons非常糟糕。或者至少比其他图标更加像素化。
可能导致此问题出现的一些问题包括：
glyphicons的错误加载。您可以通过查看浏览器中的控制台来检查此问题。glyphicons。我始终使用并且没有任何问题的源是来自Bootstrap的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>
我不熟悉w3schools（因为它是一个糟糕的资源，建议使用https://developer.mozilla.org/en-US/）。
我猜测那些是图片。它们的代码必须从一个小图片库中获取。这将极大地减缓DOM的加载速度，建议找到另一个资源来获得这些图标！
进入SVG
SVG是可缩放的矢量图形。它们是二维图形，永远不会失真，也可以用类和伪类进行切换。Font-Awesome是这些图标的绝佳资源，甚至可以收藏它！！
关于你指出的“字形”像素化的特定问题。这里是font-awesome的版本！
http://fontawesome.io/icon/info-circle/
你所需要的只是他们通过电子邮件发送给你的嵌入式代码，或者你可以下载他们的整个库（不建议这样做）。
希望这可以帮到你！
Glyphicons看起来完美，没有任何像素化。 - Deepak Yadav