如何在css中设置我想要的字体系列？答案

【问题标题】：How to set the font family I want in css?如何在css中设置我想要的字体系列？
【发布时间】：2023-04-07 02:58:01
【问题描述】：

我正在尝试为 font-family: times new roman 设置一些文本，但我在浏览器中看到了一些不同的内容（使用 chrome）。

相关css：

element.style {
  color: #F17141;
  font-size: 120px;
  font-family: "Times New Roman";
  font-weight: bold;
}

从浏览器中的开发者工具获取的实际渲染字体：

Times New Roman—Local file(1 glyph)

我得到的实际文本不是 Times new roman

【问题讨论】：

标签： html css

【解决方案1】：

您声明font-family 的方式非常完美。它在浏览器中显示的输出在 html 的情况下也是正常的，它也是Times New Roman。但是，您所期望的引号主要称为花括号，它是unicode字符，但通常在我们在word文档中使用时显示。

你看，下面三个标志是有区别的：

“ ”

因此，当您使用键盘键入时，上面的符号中的中间一个会在那里输入。如果您需要在任何地方使用它，只需复制粘贴卷曲的。这是工作演示：

p {
  color: #F17141;
  font-size: 120px;
  font-family: "Times New Roman";
  font-weight: bold;
}

&lt;p&gt;“ " ”&lt;/p&gt;

【讨论】：

【解决方案2】：

如下使用（可以将class设置为tag）：

.quote{
    color: #F17141;
    font-size: 120px;
    font-family: "Times New Roman";
    font-weight: bold;
    }

&lt;p class="quote"&gt;"&lt;/p&gt;

【讨论】：

【解决方案3】：

您需要在 head 或 css 文件中导入字体系列

<!DOCTYPE html>
<html>
<head>
<style> 
@import url(//fonts.googleapis.com/css?family=Times+New+Roman);
</style>
</head>
<body>
<p style="color:#F17141;font-size: 120px; font-family: Times New Roman; font-weight: bold;">Insert text here</p>

</body>
</html>

【讨论】：

【解决方案4】：

这是您的问题&quot;Times New Roman&quot。使用实际报价。如果您的属性用双引号引起来，请使用单引号或反之亦然：

&lt;p style="color:#F17141;font-size: 120px; font-family: 'Times New Roman'; font-weight: bold;"&gt;TNR&lt;/p&gt;

【讨论】：

【解决方案5】：

您应该像这样将class 添加到您的<p> 元素，然后在您的css 文件中添加class，如下所示：

.text{
       color: #F17141;
       font-size: 120px;
       font-family: "Times New Roman";
       font-weight: bold;
    }

&lt;p class="text"&gt;place your text here&lt;/p&gt;

您也可以使用<p> 标记本身，但是所有<p> 元素都会获得相同的样式。如果您想为不同的元素设置不同的样式，请使用类

p {
       color: #F17141;
       font-size: 120px;
       font-family: "Times New Roman";
       font-weight: bold;
    }

&lt;p class="text"&gt;place your text here&lt;/p&gt;

当使用内联样式时，你应该这样做（使用单引号）：

&lt;p style="color:#F17141;font-size:120px;font-family:'Times New Roman'; font-weight:bold;"&gt;place your text here&lt;/p&gt;

【讨论】：