css - 在 css 中替换 @import 的谷歌字体

Question

我有一个 wordpress 主题，在它的一个 CSS 文件中使用 @import 函数来引入谷歌字体我想以更优化的方式替换它并且实现相同的功能....

我留下了一些代码，看看你能不能帮我。

@import url (https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
@import url (https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
.font_weight300 {font-weight: 300! important}
.font_weight400 {font-weight: 400! important}

我曾经想过做这样的事

<link href = "https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel = "stylesheet">

但在我看来，该代码更多地放在 html 文件中，但是这段带有 @import 的代码放在 .css 文件中，所以这就是我的疑问所在。

如何为 css 文件编写最佳代码。

Answer 1

这是向元素添加字体的正确方法 import 用于导入 css 文件，如果您在本地有字体，您可以将地址放在 src 中在 Mozilla Developers Network (MDN) 上查看有关 font-face 的更多信息

    @font-face {
        font-family: "CustomFont";
        src: url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
}

并且对于在 css 属性上使用 important 你应该这样做

.font_weight400 {font-weight: 400 !important}