Question

我正在尝试为font-family设置一些文本：为新的罗马字体，但是我在浏览器中看到了一些不同的东西（使用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

The actual text I am getting which is not Times new roman

Answer 1

将其用作波纹管（您可以将class设置为tag）：

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

<p class="quote">"</p>

Answer 2

您需要在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>

Answer 3

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

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

Answer 4

您声明font-family的方式是完美的。在html的情况下，它在浏览器中显示的输出也是正常的，它也是Times New Roman。但是，您期望的引号主要是卷曲的引号，它是Unicode字符，但是在Word文档中使用时通常会显示出来。

您会看到，以下三个标志之间存在差异：

““”

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

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

<p>“ " ”</p>

Answer 5

您应该像这样向您的class元素中添加一个<p>，然后像这样在您的css文件中添加class：

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

<p class="text">place your text here</p>

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

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

<p class="text">place your text here</p>

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

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

如何在CSS中设置我想要的字体系列？

5 个答案: