时间戳

首页 > 解决方案 > 如何在 Typo3 中更改整个网站的字体类型

css - 如何在 Typo3 中更改整个网站的字体类型

问题描述

这可能是因为我是 Typo3 的初学者，对它的结构没有很好的掌握，但我似乎无法找到在哪里更改整个网站使用的字体。

我尝试将其添加到我的扩展的 css 文件中：

html {
    font-family: "Times New Roman", Times, serif;
}

但是我网站上的字体没有更改为 Times New Roman。

我还通过将它包含在 setup.typoscript 中来使用引导程序，以防万一这有什么不同。

我的网页的源代码显示它正在使用以下 css 文件（我将上面的代码添加到第二行提到的文件中）：

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" media="all">

<link rel="stylesheet" type="text/css" href="/typo3/typo3conf/ext/myextension/Resources/Public/Css/layout.min.css?1557481820" media="all">

标签： cssbootstrap-4

解决方案

您的问题发生在这里是因为 Bootstrap 覆盖了您font-family对<html>标签的定义；它对标签应用不同的字体<body>，并且独立于 TYPO3 作为 CMS 的使用。

您可以通过使用 Chrome 或 Firefox Inspector 检查 DOM 来检查它。

为了避免它，我认为你有几个选择

  1. 使用自定义版本的 Bootstrap 而不是 CDN 中的版本，您可以从其 scss 文件中编译它

  2. 覆盖引导规则，例如：

    body {
  font-family: "Times New Roman", Times, serif;
}

这应该足够了，因为您的 CSS 是在代码中的 Bootstrap 之后加载的。

甚至使用更高的特异性规则，例如：

   html body {
      font-family: "Times New Roman", Times, serif;
    }

推荐阅读