时间戳

首页 > 解决方案 > 与在表格外使用时相比，在表格中使用时 HTML 字体似乎有所不同

html - 与在表格外使用时相比，在表格中使用时 HTML 字体似乎有所不同

问题描述

我目前正在使用 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 代码，还是我只是在这里瞎了眼？

标签： htmlcss

解决方案

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

一个简单的解决方案是添加一个 CSS 规则来覆盖这个浏览器默认值。更好的解决方案可能是将ths ( table header) 更改为tds ( table cell)。

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

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>

推荐阅读