Question

试图完成本网站

http://www.nsckolkata.com/

菜单栏中的标题（在顶部的sof style.css中）的font-face无效。媒体查询（在style.css的底部）不起作用。

尝试了stackoverflow和其他论坛的大量解决方案但没有结果。

我正在提出html的css和标题部分。希望这会有所帮助。

@font-face {
    font-family: 'OldEnglish';
    src: url('../fonts/olde_english_regular/OldeEnglishRegular.eot');
    src: url('../fonts/olde_english_regular/OldeEnglishRegular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/olde_english_regular/OldeEnglishRegular.woff2') format('woff2'),
         url('../fonts/olde_english_regular/OldeEnglishRegular.woff') format('woff'),
         url('../fonts/olde_english_regular/OldeEnglishRegular.ttf') format('truetype'),
         url('../fonts/olde_english_regular/OldeEnglishRegular.svg#OldEnglish') format('svg');
    font-weight: normal;
    font-style: normal;
}

.navbar-brand{
	font-family: "OldEnglish";
	font-size: 30px;
}

.copyright{
	position:fixed;
	bottom: 10px;
	right: 10px; 
	font-size: 12px;
	background:rgba(255,255,255);
	padding:3px 12px;
	border-radius: 4px; 
	border: 1px solid #ccc;
	opacity: 0.8;
	transition: 0.5s;
}
.copyright:hover{
	background-color: rgba(0,0,0,0.8);;
	color: #fff;
	opacity: 1;
}
.committeedrop{
	padding: 7px 7px;
	min-width: 332px;
}
.contactdrop{
	padding: 7px 0px;
	min-width: 800px;	
	background-color:#fff !important;
}
		
#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(255, 255, 255, 1);
}

.label-as-badge {
    border-radius: 1em;
    font-size: 12px;
    line-height:12px;
}

.inlineblock{
	display:inline-block;
}

.navbar-brand img{
	height: 40px;
	width: 40px;
	display: inline-block;
	vertical-align: top;
	bottom: 10px;
	position: relative;
	border-radius: 6px;
}

.mb20{
	margin-bottom:20px;
}

.m0{
	margin:0px;
}
.ml3{
	margin-left:3px;
}

.panel300{
	max-height: 300px;	
	overflow: hidden;
	overflow-y: auto;}
}
.panel600{
	max-height: 600px;	
	overflow: hidden;
	overflow-y: auto;}
}

@media all and (max-width:767px) {
	body{background-color: gray;}
    .contactdrop{ min-width:300px !important;}
    .contactdrop iframe{display:none;}
    .panel300,.panel600{min-width:initial;}
}

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="nsc">
	<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="description" content="Numismatic Society of Calcutta"/>
        <meta name="author" content="Numismatic Society of Calcutta"/>
        <link rel="icon" href="image/Favicon/favicon.ico"/>
    
        <title>Numistmatic Society of Calcutta</title>
    
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
    	<link href="css/style.css" rel="stylesheet"/>
    
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
  	</head>

**更新了代码段 ***字体问题解决了。谢谢！更新了代码段。检查解决方案顶部的font-face。

Answer 1

在.panel300和.page1600样式定义中，媒体css之前有两次额外的花括号关闭。

    .panel300{
      max-height: 300px;    
      overflow: hidden;
      overflow-y: auto;}
    }
    .panel600{
      max-height: 600px;    
      overflow: hidden;
      overflow-y: auto;}
    }

从上方移除额外的花括号，如下所示

    .panel300{
        max-height: 300px;  
        overflow: hidden;
        overflow-y: auto;
    }
    .panel600{
        max-height: 600px;  
        overflow: hidden;
        overflow-y: auto;
    }

同样在我检查浏览器控制台时你的字体路径是错误的。检查下面的截图 screenshot

也将您的文档类型更改为

<!DOCTYPE html>

Answer 2

在我的情况下，我只是将DOCTYPE标记更改为<!DOCTYPE html>。

您不需要包含每个字体扩展名。只需使用.ttf或.otf。

Answer 3

您的字体无法访问，这就是它无法正常工作的原因。请看一看。请在此处查看：http://www.nsckolkata.com/font/olde_english_regular/OldeEnglishRegular.ttf

当您使用Wordpress时，您可能会发现本文很有用： https://jeffsebring.com/2012/how-to-use-web-fonts-with-wordpress/

按如下方式编写媒体查询：

@media (max-width: 768px) {
.body{background-color: gray;}
.contactdrop{ min-width:300px !important;}
.contactdrop iframe{display:none;}
.panel300,.panel600{min-width:initial;} }

Answer 4

由于404的原因，似乎是错误的路径...尝试absolute URL src属性而不是relativ只是为了确定（或给我们绝对路径）到字体，所以我们可以检查访问。）

媒体查询无效

4 个答案: