为什么即使我已经标准化字体，字体大小仍然不同

Question

在此输入图片描述

在此输入图片描述

我在为搜索栏实现一致的字体大小并在网页上创建按钮方面面临挑战。尽管在我的 CSS 中标准化了字体大小，但搜索栏看起来比预期的要长，并且创建按钮的字体大小在一个页面上看起来比另一页面更大。你们能否提供有关如何确保这些元素统一字体大小的指导？

这是CSS代码：

/* Common styles for both home and trending pages */
body {
  margin: 0;
  font-family: 'Roboto', Arial, sans-serif; /* Standardize font family */
  font-size: 16px; /* Standardize base font size */
  display: flex;
}

.vertical-menu {
  width: 240px;
  background-color: #fff;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  overflow-y: auto;
  border-right: 1px solid #ddd;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.vertical-menu .menu-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #ddd;
}

.vertical-menu .logo {
  max-width: 200px;
  margin-bottom: 0;
}

.vertical-menu a {
  background-color: #fff;
  color: #333;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.vertical-menu a i {
  margin-right: 12px;
}

.vertical-menu a:hover {
  background-color: #f6f6f6;
}

.vertical-menu a.active {
  background-color: #0079d3;
  color: white;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px;
  border-bottom: 1px solid #ddd;
  background-color: #f6f6f6;
  width: 100%; /* Adjusted to full width */
  position: fixed;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.search-bar {
  background-image: url(image/search.png);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: right;
  width: 100%; /* Adjusted to full width */
  max-width: 600px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 20px; /* Rounded corners */
  font-family: 'Roboto', Arial, sans-serif; /* Ensure consistent font family */
  font-size: 16px; /* Adjust font size */
}

.profile-icon {
  font-size: 20px; /* Adjusted font size */
  margin-right: 25px;
  padding: 8px; /* Padding inside the border */
  display: inline-block; /* Ensures it behaves as a block element */
  text-decoration: none; /* Removes default underline */
  color: #333; /* Text color */
}

.create-container {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  margin-right: 16px; /* Adjusted margin */
}

.create {
  width: 24px; /* Adjusted icon size */
  height: 24px; /* Adjusted icon size */
  margin-right: 8px;
}

.content {
  margin-left: 240px;
  margin-top: 100px;
  padding: 16px;
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: left;
}

.forum-discussion {
  overflow: hidden; /* Hide overflow content */
  text-overflow: ellipsis; /* Truncate text */
  white-space: nowrap; /* Prevent wrapping */
  max-width: 1190px;
  max-height: 240px;
  margin-top: 2%;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
}

.subforum-avatar {
  display: flex;
  align-items: center;
}

.subforum-date {
  color: #888;
  font-size: 12px;
}

.description h1 {
  font-size: 18px;
  margin: 0;
}

.subforum-description p {
  margin: 10px 0;
}

.subforum-description ul {
  list-style-type: disc;
  padding-left: 20px;
}

.gold,
.silver,
.bronze {
  float:right;
  width: 70px;
}

.forum-discussion-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.forum-discussion {
  padding: 15px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Hover effect */
.forum-discussion-link:hover .forum-discussion {
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Active/focus effect */
.forum-discussion-link:focus .forum-discussion,
.forum-discussion-link:active .forum-discussion {
  background-color: #f1f1f1;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

/* Additional effects */
.forum-discussion-link .forum-discussion {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.forum-discussion .subforum-avatar i {
  margin-right: 10px;
}

.forum-discussion h1 {
  margin: 10px 0;
  font-size: 18px;
}

.forum-discussion p,
.forum-discussion ul {
  margin: 10px 0;
}

.forum-discussion ul {
  list-style-type: disc;
  padding-left: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="home.css">
    <title>Trending</title>
    <style>
        .medal {
            display: inline-block;
            width: 30px; /* Adjust size as needed */
            height: auto;
            margin-right: 5px;
        }

        .content{
          margin-left: 240px;
        }
        .filter{
          margin-left: -15px;
        }


    </style>
</head>
<body>
    <div class="vertical-menu">
        <div class="menu-header">
            <a href="home.php">
                <img src="image/project logo.png" alt="Logo" class="logo">
            </a>
        </div>
        <a href="home.php"><i class="fas fa-home"></i> Home</a>
        <a href="trending.php?filter=all" <?php if ($filter == 'all') echo 'class="active"'; ?><i class="fas fa-chart-line"></i> Trending</a>
        <a href="about.php"><i class="fas fa-info-circle"></i> About</a>
    </div>
    <div class="top-bar">
        <input type="text" placeholder="Search Discussion" class="search-bar">
        <a href="create.html" class="create-container">
            <img src="image/edit.png" alt="create" class="create">
            <span>Create</span>
        </a>
        <a href="login page.html" class="fas fa-user profile-icon"></a> <!-- Icon with user's name -->
    </div>

Answer 1

我在你的CSS中看到了一些问题，有些可能与你的问题有关。

1. W3.css 将您的正文字体大小（继承给所有子项）定义为 15px，您在代码中明确将其设置为 16px。查看 css Specificity 来解决此问题。

2. 你的身体错过了结束标签(

   </body>

   )

3. 请注意，在浏览器配置中使用自定义字体大小的用户将看到他们的设置被您的 CSS 覆盖。

4. 您的 W3c.css 添加一个 text-size-adjust 属性，如果您检查响应式设置，该属性可能会推断出您的字体大小。

正如 Brett 建议的那样，使用网页上的检查器来查看使用的字体大小以及它来自哪里。

我们可以看到你的字体大小是15px，它来自于

html, body

第27行定义的规则

w3.css

。

如果将鼠标悬停在属性上并单击箭头（属性来自何处），您还可以检查“计算”部分

（检查器部分来自Chrome，但现在所有浏览器都有这种功能）