为什么在添加字体系列时文本会消失？

Question

当我在CSS（.heading { }）中向标题声明font-family时，为什么文本会在输出中消失？

在： Before font-family declaration

在： After font-family declaration

font-family声明的另一个类似但又奇怪的问题是，在添加声明后，Text不会遵循边距，填充和边框规范，并且会与浮动的<div>重叠。即使删除了该行，此问题仍会存在，并且仅在使用“ctrl + Z”反转文件更改时才会修复。

代码：

* {
    
      -webkit-box-sizing: border-box;
    
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }
    
    
    .clearfix {
    	overflow: auto;
    }

    @page{
    
    	size: 7in 9.25in;
    	margin: 27mm 16mm 27mm 16mm;	
    
    }
    
    #margin {
    	max-width: 90%;
    	margin: 0 auto;
    }
    
    .sectionHeadingIndent {
    
    	background-color: black;
    	border: black;
    	float: left;
    	width: 5%;
    	height: 100%;
    	position: absolute;
    }
    
    ***Font-family declaration below here***
    
    .heading {
    
    	margin-left: 5%;
    	padding-left: 1%;
    	margin-bottom: 0;
    	padding-bottom: 0;
    	border-bottom-style: none;
    	font-family: Courier;
    }
    
    .header {
    	position: relative
    }
    
    .header_firstLine {
    	position: relative;
    	margin-bottom: 0;
    	padding-bottom: 0;
    	border-bottom-style: none;
    }
    
    .header_secondLine {
    	position: relative;
    	margin-left: 5%;
    	padding-left: 1%;
    	margin-top: 0;
    	padding-top: 0;
    
    	line-height: 1;
    	border-top-style: none;
    
    }
    
    #introduction {
    	height: 20%;
    }
    
    .Subhead {
    	display: inline-block;
    }
    
    
    #objective_summary{
    	width: 30%;
    	margin: 10% auto;
    }

 
    <!-- Page boundary div -->
    <div>
    
    	<!-- Margins div -->
    	<div id = "margin" >
    
    
    		<section id = "introduction">
    		<!-- Introduction section -->
    
    			<div class = "header">
    
    				<div class = "header_firstLine">
    					<!-- For indent and Name -->
    					<div class = "sectionHeadingIndent"></div>
    
    					<h1 class = "heading", style = "arial">H1</h1>
    				</div>
    
    				<div class = "header_secondLine clearfix">
    					<!-- For Contact Information -->
    					<div class = "Subhead">
    						Subheading
    					</div>
    
    
    				</div>
    
    			<div id = "objective_summary">
    				Text
    			</div>
    
    		</section>
    
    
    		<section>
    		<!-- on Section -->
    			<div class = "header">
    				<div class = "sectionHeadingIndent"></div>
    
    				<h2 class = "heading">H2</h2>
    			</div>
    
    
    			<div>
    
    				<div class = "on_ce">
    					<div class = "on_name">
    						Text
    					</div>
    					<div class = "on_place">
    						Text
    					</div>
    				</div>
    
    			</div>
    
    		</section>
    
    
    	</div>
    </div>
 

Answer 1

直接复制并粘贴，删除评论后，您的代码正常。

但是，您的代码也包含错误。使用逗号：

<h1 class = "heading", style = "arial">H1</h1>
-->
<h1 class = "heading" style = "arial">H1</h1>