bootstrap 3.3.6 plus 图标有变化吗？

Posted 2023-03-06

【中文标题】bootstrap 3.3.6 plus 图标有变化吗？

【英文标题】：Is bootstrap 3.3.6 plus icon changed?

【发布时间】：2017-04-20 23:27:25

【问题描述】：

当我使用引导程序加号图标时，它很厚。例如。

span 
  font-size: 30px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />

<span class="glyphicon glyphicon-plus"></span>

正如您所见，加号图标很厚，但在某些使用引导程序的网站上，我发现相同的加号图标很薄，例如http://gporetro.com/ 移动设备上的菜单具有相同的 30px 字体大小的细加号图标。

bootstrap 3.3.6 plus 图标现在变粗了吗？ 如何使用相同的旧稀释剂加号图标？

谢谢。

【参考方案1】：

在我看来他们正在使用自定义 CSS。

span 
  font-size: 30px;

<link href="http://gporetro.com/css/bootstrap.css" rel="stylesheet" />

<span class="glyphicon glyphicon-plus"></span>

您也可以在他们的“responsive.css”文件中找到它。

nav .dropdown .glyphicon-plus 
    font-size: 30px;
    font-weight: 700;
    color: #FCFCFC;
    padding: 5px 20px;
    position: static;
    cursor: pointer;
    float: right;

虽然，我现在对它如何在 sn-p 窗口中显示更薄的 plus 感到困惑，而没有链接该特定的 CSS 文件。 编辑：正如另一个答案中所解释的，字体文件本身丢失了，所以它回退到另一个 + 号。

【讨论】：

否 gporetro.com/css/bootstrap.css 和 maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css 没有区别。我在 sublime 编辑器中比较了它们。

如果不在 cdn 上，相同的引导 css 的行为会有所不同吗？

我刚刚发现他们在 responsive.css 文件中有一些自定义 CSS。

你得到更薄的原因是因为在你的 sn-p CSS 上你没有提到字体粗细，所以你得到的默认值是 400 / normal 而在 responsive.css 字体- 重量为 700 / 粗体。

【参考方案2】：

responsive.css 上有一些 css 覆盖 gporetro.com 缺少图标字体文件。

---

nav .dropdown .glyphicon-plus 
    font-size: 30px;
    font-weight: 700;
    color: #FCFCFC;
    padding: 5px 20px;
    position: static;
    cursor: pointer;
    float: right;

Bootstrap 有以下指令。

@font-face 
    font-family: 'Glyphicons Halflings';

    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

如果您在 gporetro 上检查字体文件的 URL，您将获得 404，而在引导 CDN 上您会获得文件。我以 .eot 为例，但对于所有扩展名都是如此。

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot

http://gporetro.com/fonts/glyphicons-halflings-regular.eot

注意：基础 css 位于以下位置：

http://gporetro.com/css/bootstrap.css https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

您可能会问，它是如何呈现 + 号的呢？这是因为 glyphicon 使用默认的 html 代码作为加号每个是\002b' - http://htmlarrows.com/math/plus-sign/。

这个例子代表 gporetro

p:before
  content:'\002b';


/*Code from responsive.css*/
p
font-size: 30px;
font-weight: 700;
color: black;
padding: 5px 20px;
position: static;
cursor: pointer;
float: right;

<p></p>

这是一个使用 cloudflare CDN 引导程序的示例，供您比较：

/*Code from responsive.css*/
.glyphicon-plus
font-size: 30px;
font-weight: 700;
color: black;
padding: 5px 20px;
position: static;
cursor: pointer;
float: right;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />

<span class="glyphicon glyphicon-plus"></span>

【讨论】：

感谢您的解释。我还有一个问题。当我在 gporetro devtools 上删除 font-family Glyphicon Halfings 时，为什么加号会变粗一些？如果glyphicon halfing 尚未加载，那么字体系列不应该自动回退到其他值吗？

这是因为当你删除 font-family Glyphicon Halfings 时，它会随着 CSS 的级联而退回到“Helvetica Neue”、Helvetica、Arial、sans-serifbody”。如果你不删除 Glyphicon浏览器仍然会尝试加载它，当它找不到字体文件时，由引擎决定要做什么，因为没有回退并且它不会在 css 中查找下一个回退。准备好解释。***.com/questions/29241764/…

我发现使用 bootstrap cdn 如果我手动输入错误的字体系列，如 font-family : Jhinga lala glyph，那么我有相同的 tinner 加号图标。因为字体系列没有后备，文本引擎使用它的算法来制作更薄的加号图标。

【参考方案3】：

glyphicon 字体未在 gporetro.com 上正确加载。

404 未找到http://gporetro.com/fonts/glyphicons-halflings-regular.ttf

所以它使用默认字体。

如果你想要相同的图标渲染，你只需要强制使用与 gporetro 相同的字体：

span 
    font-size: 30px;


.glyphicon-plus:before 
    font-family: "Times New Roman";
    font-weight: 700;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />

<span class="glyphicon glyphicon-plus"></span>