Question

我目前正在使用CSS中的自定义字体来构建我的第一个网页。看起来像这样：

  @font-face {
      font-family: "Baiti";
      src: url("./fonts/baiti.ttf");
    }
    body { font-family: "Baiti", serif }



.navbar 
{
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}

/* Links inside the navbar */
.navbar a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: #ddd;
  color: black;
}

/* Main content */
.main {
  margin-top: 30px; /* Add a top margin to avoid content overlay */
}

.container{
    width:900px;
    margin:auto;
}

.box-2 /*targeting class from HTML*/
{
    border:8px dotted #ccc;
}

我现在要在页面中添加一些文字。有些在表内，而另一些在表外：

   <html>

    <head>
        <title>innomotion media</title>

        <!--reference CSS file, will only affect CSS PART, HTML comes first-->
        <link rel="stylesheet" 
          type"text/css" 
          href="styles.css">              
    </head>

    <body>

        <!--NavBar-->       

        <div class="navbar">
            <a href="#missing">Contact</a>
            <a href="#missing">What we do</a>
            <a href="#missing">Who we are</a>
            <a href="#missing">Home</a>
        </div>

        <!--Heading-->      

        <div class="container"> <!--width set in css-->

            <div align="center" style="padding-top: 50px">          
                <img 
                    src="./img/banner_top.jpg"
                    width=100%
                </img>  
            </div>

            <div align="center" style="padding-top: 10px" > 
                <font color="#534f4f" size="+1">    
                    <h1>Hello, friend.</h1>
                </font>
            </div>
            <div align="justify">   
                <font color="#534f4f" size="+2" >   
                    <p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
                        We offer you the cheapest but also the quickest way of getting your app or game finished and monetized. 
                        Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
                        shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.           
                    </p>        
                </font>
            </div>


            <div align="center" class="box-2">
                <div align="center> 
                    <font color="#534f4f" size="+1">    
                        <h1>Who we are</h1>
                    </font>
                </div>
                <div style="padding-left: 15px; padding-right: 15px">   
                    <table border="0">
                        <tr> <!--tablerow-->
                            <th width=400px>
                                <div align="center">    
                                    <img 
                                        src="./img/me.png"
                                        width=60%
                                    </img>  
                                </div>
                            </th>   
                            <th width=400px>
                                <div align="justify">   
                                    <font color="#534f4f" size="+2" >   
                                        <h3>Julius Tolksdorf</h3>
                                        <p>CEO of innomotion media and head of software developement.<br>
                                            He will be your primary contact during the planning and developement processes.
                                            Julius has already finished about 20 apps & games and has years of experience being an Android developer.
                                        </p>
                                    </font>
                                </div>
                            </th>   
                        </rt> <!--for padding-->
                            <tr height=20px/>
                        </rt>

                    </table>
                </div>
            </div>



        </div>

    </body>

</html>

但是结果看起来像这样：

因此，如果我的眼睛看不见我，那么这两个文本看起来可能不一样，还是呢？对我来说，桌子里面的东西似乎在某种程度上是“更大”还是“更大”？甚至更暗。但是，这不能来自我编写的html代码，还是我只是在这里盲目？

任何帮助都是史诗般的！

谢谢：）

Answer 1

问题是您正在使用th标记，该标记采用font-weight:bold样式（至少在我的浏览器中，并且可能在您的浏览器中）。

一个简单的解决方案是添加一个CSS规则来覆盖此浏览器的默认设置。更好的解决方案可能是将th（table header）更改为td（table cell）。

通过将您的html复制到堆栈编辑器中，然后右键单击粗体文本，选择Inspect，然后转到计算属性并查看应用的属性，我能够找到此问题。我建议您对检查员感到满意；这对于调试网页问题非常有用。

th {
  font-weight:normal;
}

<div class="container"> <!--width set in css-->

            <div align="center" style="padding-top: 50px">          
                <img 
                    src="./img/banner_top.jpg"
                    width=100%
                </img>  
            </div>

            <div align="center" style="padding-top: 10px" > 
                <font color="#534f4f" size="+1">    
                    <h1>Hello, friend.</h1>
                </font>
            </div>
            <div align="justify">   
                <font color="#534f4f" size="+2" >   
                    <p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
                        We offer you the cheapest but also the quickest way of getting your app or game finished and monetized. 
                        Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
                        shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.           
                    </p>        
                </font>
            </div>


            <div align="center" class="box-2">
                <div align="center> 
                    <font color="#534f4f" size="+1">    
                        <h1>Who we are</h1>
                    </font>
                </div>
                <div style="padding-left: 15px; padding-right: 15px">   
                    <table border="0">
                        <tr> <!--tablerow-->
                            <th width=400px>
                                <div align="center">    
                                    <img 
                                        src="./img/me.png"
                                        width=60%
                                    </img>  
                                </div>
                            </th>   
                            <th width=400px>
                                <div align="justify">   
                                    <font color="#534f4f" size="+2" >   
                                        <h3>Julius Tolksdorf</h3>
                                        <p>CEO of innomotion media and head of software developement.<br>
                                            He will be your primary contact during the planning and developement processes.
                                            Julius has already finished about 20 apps & games and has years of experience being an Android developer.
                                        </p>
                                    </font>
                                </div>
                            </th>   
                        </rt> <!--for padding-->
                            <tr height=20px/>
                        </rt>

                    </table>
                </div>
            </div>

Answer 2

如果您使用Chrome中的开发工具检查元素，则会看到字体粗细是从th单元格继承而来的。您不应以这种方式使用表头。

我强烈建议您不要在现代Web开发中使用基于表的布局，但是在这种情况下，您应该将标题放在一行上，并使用正确的td将图片和段落移到新的一行表格单元格。

[编辑]

进一步详细说明，表是实现现代网格属性所实现的一小部分的旧方法。要获得所需的布局，您将需要使用两行，其中第一行应跨越两列：

.center{
text-align:center;
}

<table border="0">
    <tr>
	<th colspan=2>
	    <h1>Julius Tolksdorf</h1>
	</th>
    </tr>
    <tr>
	<td class="center"> 
           <img 
            src="https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
            width=60%
           />
        </td>  
        <td class="center">
	<font color="#534f4f" size="+2" >   
	     <p>CEO of innomotion media and head of software developement. 
		<br>
		He will be your primary contact during the planning and developement processes.
		Julius has already finished about 20 apps & games and has years of experience being an Android developer.
	     </p>
	</font>
</td>
      </tr>

</table>

Answer 3

您要对所有文本而不只是标题应用size =“ +2”

更改此：

<font color="#534f4f" size="+2" >   
     <h3>Julius Tolksdorf</h3>
     <p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes.  Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
 </font>

对此：

<font color="#534f4f" size="+2" >   
     <h3>Julius Tolksdorf</h3>
 </font>
     <p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes.  Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>

还要检查class="box-2"，它仅分配给第一个文本

与在表外使用相比，在表中使用html字体似乎有所不同（请参见图片）

3 个答案: