Question

首先，对不起，如果已经在某处问过这个问题：我在发布之前检查了现有的问题。我是Bootstrap的新手，我必须说我喜欢它！当我听说FontAwesome及其与Bs的整合时，我真的很开心。我设法在我的Bs网站中包含FontAwesome，但是，当时，通过Google Web Fonts添加的一些字体消失了。这很有趣：“jumbotron”中显示的Google字体已正确显示，但基本字体系列不是我在CSS文件中定义的字体。 基本页面布局：

<--------menu------->
<-----jumbotron----->
<span4><span4><span4>

HTML文件中的代码：

<!-- FontAwesome -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!-- End FontAwesome -->
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- Google Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css'>
<!-- End Google Web Fonts -->

CSS文件中的代码：

body {
  margin: 0;
  **font-family: 'Open Sans', sans-serif;**
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background-image: url('../img/cardboard.png');
  background-repeat: repeat;
}

以下代码按预期工作（ jumbotron ）：

.jumbotron h1 {
  **font-family: 'Lily Script One', cursive;**
  text-align: center;
  font-size: 80px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
}
.jumbotron p {
  **font-family: 'Rancho', cursive;**
  font-size: 24px;
  font-weight: 300;
  line-height: 1.25;
  margin-bottom: 30px;
  text-align: center;
}

但是这个 - Span4 - （也在CSS文件中）不是：

.span4 {
  font-family: 'Rancho', cursive;
  width: 300px;
  text-align: center;
}

每当我删除HTML文件中对FontAwesome的引用时问题就会消失，这意味着所有Google字体都会正确显示。

仅供参考：我在本地使用Bootstrap（通过XAMPP）与谷歌浏览器（IE10同样的问题）对这个问题有什么看法吗？

提前感谢您的支持。祝你有愉快的一天！

冲突：谷歌网络字体＆amp; FontAwesome

0 个答案: