Question

我有一个图像，我通过将文本设置为 span 在它旁边放置了一些文本，但我似乎无法更改字体大小。我尝试从 css 中的许多不同位置更改它，但没有成功。

body {
  border: 0;
  font-size: 16px;
  font-family: serif, sans-serif;
}

.logo {
  position: static;
  height: 90px;
}

img {
  font-size: 16;
  vertical-align: top;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Audi</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <img class="logo" src="https://cdn.freelogovectors.net/wp-content/uploads/2016/12/audi-logo.png" alt="logo">
  <hr>

  <img style="height: 400px;" src="https://www.autozone-mag.com/uploads/1666-audi-rs-6-avant-2019.jpg" alt="RS6">
  <span>this is some text</span>


</body>

</html>

Answer 1

你试过了吗：

span {
  font-size: 30px;
}

span {
  font-size: 30px;
}

body {
  border: 0;
  font-size: 16px;
  font-family: serif, sans-serif;
}

.logo {
  position: static;
  height: 90px;
}

img {
  font-size: 16;
  vertical-align: top;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Audi</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <img class="logo" src="https://cdn.freelogovectors.net/wp-content/uploads/2016/12/audi-logo.png" alt="logo">
  <hr>

  <img style="height: 400px;" src="https://www.autozone-mag.com/uploads/1666-audi-rs-6-avant-2019.jpg" alt="RS6">
  <span>this is some text</span>


</body>

</html>

或者添加一个类：

.text-beside-car-image {
   font-size: 30px;
}

.text-beside-car-image {
  font-size: 30px;
}

body {
  border: 0;
  font-size: 16px;
  font-family: serif, sans-serif;
}

.logo {
  position: static;
  height: 90px;
}

img {
  font-size: 16;
  vertical-align: top;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Audi</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <img class="logo" src="https://cdn.freelogovectors.net/wp-content/uploads/2016/12/audi-logo.png" alt="logo">
  <hr>

  <img style="height: 400px;" src="https://www.autozone-mag.com/uploads/1666-audi-rs-6-avant-2019.jpg" alt="RS6">
  <span class="text-beside-car-image">this is some text</span>


</body>

</html>

Answer 2

您的目标是 img HTML 标签，而不是 span HTML 标签。

您的 CSS 规则（如下）不适用于文本，因为该规则针对 img 但文本位于 span 标记中。

img {
  font-size: 16;
  /* ... */
}

此外，font-size: 16 缺少单位类型，例如 px、pt、em、rem 等（请参阅 {{3} }).

最后，如果一个详细的例子对你有帮助，请告诉我。

Answer 3

您需要在元素 span 中设置 font-size，而不是在元素 img 中。因为元素 img 不支持 font-size 属性。因此，您可以设置

span {
  font-size: 16px;
}

此外，当您在 CSS 中放置单位时，您需要放置绝对单位（px, pt 等...）或相对单位（em, rem 等...）。不仅是这样的数字，因为它不是从浏览器解释的。

img {
  font-size: 16;      
}

例如font-size: 16px;

最后，如果设置 font-size: 16px;，您不会看到任何不同，因为浏览器默认字体大小 是 16px。要查看差异，您需要输入 font size > 16px 或 font size < 16px。

body {
  border: 0;
  font-size: 16px;
  font-family: serif, sans-serif;
}

.logo {
  position: static;
  height: 90px;
}

img {  
  vertical-align: top;
}

span {
  font-size: 22px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Audi</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <img class="logo" src="https://cdn.freelogovectors.net/wp-content/uploads/2016/12/audi-logo.png" alt="logo">
  <hr>

  <img style="height: 400px;" src="https://www.autozone-mag.com/uploads/1666-audi-rs-6-avant-2019.jpg" alt="RS6">
  <span>this is some text</span>


</body>

</html>

无法更改文字大小

3 个答案: