logo标签列表

我的h1标签字体族突然在CSS中改变了原来的字体族。

javascripthtmlcss
3
我有一个HTML网站，每个页面的CSS都是相同的。今天我的首页字体突然变了。原来的字体是：font-family: "Alex Brush";，但现在变成了一些普通的字体。我尝试在页面的头部添加font-family: "Alex Brush";，但没有起作用。我不知道为什么它不能显示与其他页面相同的字体。
我的CSS：
html, body {
  font-family: "Source Sans Pro", sans-serif;
  height: 100% !important;
  font-weight: 300;
  color: #444;
  position: relative;
  font-size: 14px;
  line-height: 1.5em;
}
html h1, html h2, html h3, html h4, html h5, body h1, body h2, body h3, body h4, body h5 {
  font-family: "Alex Brush";
  font-weight: 300;
  margin: 0px;
  letter-spacing: 2px;
  color: #555;
}

以下是我的 head 标签：

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <meta name="author" content="Suave Digital">
    <link rel="apple-touch-icon" sizes="72x72" href="assets\images\apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets\images\apple-icon-114x114.png">
    <link rel="shortcut icon" type="image/png" sizes="32x32" href="assets\images\favicon-32x32.png">

    <title>The Nosh Bistro </title>

    <!-- Bootstrap core CSS -->
    <link href="assets/stylesheets/css/bootstrap.min.css" rel="stylesheet">

    <!-- font-awesome.css -->
    <link href="assets/stylesheets/css/fontawesome/font-awesome.min.css" rel="stylesheet">

    <!-- pe-icon.css -->
    <link href="assets/stylesheets/css/pe-icon/pe-icon-7-stroke.css" rel="stylesheet">
    <link href="assets/stylesheets/css/pe-icon/helper.css" rel="stylesheet">
    <link href="assets/fonts/flaticon/flaticon.css" rel="stylesheet">

    <!-- Fancybox -->
    <link href="assets/javascripts/fancybox/jquery.fancybox.css" rel="stylesheet">

    <!-- Slick -->
    <link href="assets/stylesheets/css/slick/slick.css" rel="stylesheet">
    <link href="assets/stylesheets/css/slick/slick-theme.css" rel="stylesheet">

    <!-- Animate -->
    <link href="assets/stylesheets/css/animate.css" rel="stylesheet">

<script>
window.onscroll = function() {
    growShrinkLogo()
  };

  function growShrinkLogo() {
    var Logo = document.getElementById("logo")
    if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
      Logo.style.width = '72px';
    } else {
      Logo.style.width = '180px';
    }
  }
</script>

    <!-- Main CSS -->
    <link href="assets/stylesheets/css/style.css" rel="stylesheet">

    <!-- Font style -->

    <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/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#myModal").modal('show');
        });
    </script>
    <style>








    .modal-content{
      width: 440px;
    margin-left: 40px;
    margin-top: -15px;
    }
    .modal-header{
      height: 5px;
    }
    .peep{
      margin-top: -6px;
    }

    /* @media screen and (max-width: 768px) {


} */

    </style>



  </head>

我不知道我的首页出了什么问题。我希望我首页上的

标签能够展示"Alex Brush"字体。有人知道如何解决我的问题，或者可以告诉我如何更改内联标签中的字体族吗？
这是我的HTML页面：链接。

请检查文件及其路径是否正确。 - Joykal Infotech
你能展示一下你是如何在CSS中导入字体的吗？ - aflyzer
@ZubairShah 把这个放在你的<head>标签里：<link href="https://fonts.googleapis.com/css?family=Alex+Brush" rel="stylesheet"> - aflyzer
那么你期望字体如何呈现？？你已经包含了 Roboto 的链接，为什么不用 Alex O.o 呢？ - Joykal Infotech
@ZubairShah，我不明白哪里出了问题。因为你说这个字体在你的标题上是正确的（在我的截图中）。你能详细解释一下具体哪里出了问题吗？ - aflyzer
显示剩余14条评论
2个回答
0

似乎这两个链接

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

正在覆盖您的默认 CSS。因此，请在这两个文件之后加载您的 CSS 文件，或者在样式中使用 !important。

另外，我检查了您的网站。您的资产文件没有加载，请检查服务器配置。

CSS files

如何使用important？ - user11300121
我认为你可以将style.css放在所有的.css文件之后，这样它会覆盖其他的.css文件。 - aflyzer
我刚刚看到了你的网站，你的字体似乎能够正常工作... 你确定吗？ - aflyzer
@brk 我尝试删除你说的两个外部链接，但还是不起作用。 - user11300121
你有一个名为stylesheets/css的文件夹 我觉得这可能会引起一些问题。将其命名为'stylesheets'，并在内部创建一个名为'css'的文件夹。 - aflyzer
显示剩余2条评论
0

你可能导入了几次相同的文件（如jquery、bootstrap等）。

在你的<head>中，你可以删除以下内容：

<link href="assets\stylesheets\css\menu\bootstrap.min.css" rel="stylesheet"> 
(the second one not the first)

<script src="assets\stylesheets\css\menu\bootstrap.min.js"></script> (put this 
script on your footer with other script) and change "\" to "/" in the path.


<!-- Font style -->
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

请在您的文件夹中将“stylesheets/css”更改为“stylesheets”，然后创建一个名为"css"的新文件夹，并将所有文件放入其中。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接