在 CSS 中更改字体答案

【问题标题】：Changing font in CSS在 CSS 中更改字体
【发布时间】：2017-06-20 09:06:48
【问题描述】：

我需要将字体更改为 Georgia。当前的css是：

font: normal normal normal 14px/1 FontAwesome;

我将它与图标一起使用，但我想将字体更改为 Georgia，为此我尝试了这个：

font: Georgia normal normal 14px/1 FontAwesome;

但这不起作用。我做错了什么？

【问题讨论】：

字体设置为 fontawesome。您可以包含您要更改的内容的 html 吗？
最好的解决方案是了解你在改变什么，developer.mozilla.org/en-US/docs/Web/CSS/font?v=example
这样做font: normal normal normal 14px/1 Georgia; ...由于您重复默认设置（normal），您可以将其缩减为font: 14px/1 Georgia;
它为文本工作，但它删除了当前的 fa-icon

标签： css

【解决方案1】：

同一个元素不能有两种字体。您需要将文本 HOME 移动到单独的元素。

例如

CSS

.home {
    font-family: Georgia;
}

HTML

<i class="fa fa-map-marker"></i><span class="home">HOME</span>

【讨论】：

【解决方案2】：

Font Family fontAwesome 与 Font Family Georgia 无关

你应该这样声明

font: normal normal 14px/16px Georgia,sans-serif;

第一个normal -> font-weight（浅色普通粗体等）

第二个normal -> font-style（正常、斜体、斜）

14px->font-size

16px -> line-height（我建议你使用比字体大小更大的行高，不像你在示例中设置的那样）

georgia,sans-serif -> font family，georgia 是 family-name，sans-serif 是 generic-family

您可以在单个标签上使用 2 个字体系列，但不会像您想要的那样工作。它会像这样工作：

font-family 属性可以保存多个字体名称作为“备用”系统。如果浏览器不支持第一种字体，它会尝试下一种字体。

p {
		
font: normal normal normal 14px/1 FontAwesome;
}
h1 {
	font: normal normal 14px/16px Georgia,sans-serif;
}

<h1>
some heading
</h1>
<p>
Some text
</p>

【讨论】：