我可以在我的 tumblr 博客上使用早期访问 Google 字体吗？答案

【问题标题】：Can I use early access Google Font on my tumblr blog?我可以在我的 tumblr 博客上使用早期访问 Google 字体吗？
【发布时间】：2018-08-20 17:18:14
【问题描述】：

我想使用这种早期访问 Google 字体： https://fonts.google.com/earlyaccess#Noto+Nastaliq+Urdu+Draft

在我的 tumblr 博客上： https://muneebkablog.tumblr.com

安装的主题是这个： https://www.tumblr.com/theme/38737

它确实支持谷歌字体，但我不知道如何使用早期访问谷歌字体。

我试过在

之后添加这个 http://fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css' rel='stylesheet' type='text/css'>

但后来我不知道如何编辑以下 html 以使用此字体。这是html中的代码。

html {
        font: 175%/1.5 {block:ifGoogleWebFont}{text:Google Web Font},{/block:ifGoogleWebFont} Avenir, Arial;
        -webkit-font-smoothing: antialiased;
    }

另外，我在网上搜索并知道可以添加自定义 CSS，所以我尝试在“添加自定义 CSS”中添加以下代码：

@import url(http://fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css);
body {
    margin: auto;
    margin-top: 2em;
    margin-bottom: 10em;
}
*[lang=ur] {
    direction: rtl;
    font-family: 'Noto Nastaliq Urdu Draft', serif;
}

但似乎没有任何效果。

您现在可能已经注意到我根本不是程序员。我只是一个尝试处理 html 和 CSS 代码的休闲博主。

非常感谢任何帮助:)

【问题讨论】：

标签： html css tumblr

【解决方案1】：

要使用任何 Google 字体，只需使用网站上提供的代码 sn-ps。在您的情况下，将这些行添加到您的 css 文件中：

@import url(//fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css);

你已经做到了！

来源：https://fonts.google.com/earlyaccess#Noto+Nastaliq+Urdu+Draft

然后，您的示例代码仅将此字体应用于包含lang 属性的元素，即<p lang="ur">。

*[lang=ur] 被称为 (CSS) 选择器，* 基本上是一个通配符，它选择所有元素 - 已修改为仅匹配某些元素。

我的猜测： 您的 html 代码中没有 lang 属性 - 但我现在无法确定，因为您还没有发布任何代码。

【讨论】：

非常感谢！我添加了：@import url(//fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css);到 tumblr 编辑器中的“添加自定义 CSS”框。然后我在主题的“Google Web 字体”选项中添加了“Noto Nastaliq Urdu Draft”。现在它似乎起作用了；至少，在主题编辑器中。当我单击“更新预览”按钮时，它确实显示了 Nasaliq 字体中的所有内容。但是一旦我退出编辑器，它就会再次以以前的字体显示所有内容；我认为，它是 Arial。我应该在 html 中的某处添加 *[lang=ur] 吗？我应该分享整个主题的 html 吗？这会有帮助吗？
也许您可以更改您的条目帖子以包含有效链接（即没有指向您博客的链接），以便我们可以检查您的源代码。但是，如果没有包含 lang 属性的单个元素，它无论如何都不会起作用。
谢谢！我在帖子中添加了链接。请你看一下。
大约一小时前我在您的网站上时，您说得对。也许您只需要完全刷新页面（在 Firefox 上为 CTRL + F5）
它是否在您的浏览器中显示 Nasaliq 字体？阅读您的评论后，我刚刚安装了 Firefox，但它似乎没有显示我想要的字体。

【解决方案2】：

@Muneeb Ahmed，@elasticman 是正确的

这是 Google Fonts Early Access https://fonts.google.com/earlyaccess 的工作代码

<html>
   <head>
      <style>
         @import url(//fonts.googleapis.com/earlyaccess/notonastaliqurdu.css);
         body {    
         font-family: 'Noto Nastaliq Urdu', serif;
         font-size: 36px;
         color: blue;
         text-align: right;
         }
      </style>
   </head>
   <body>
      <div>السلام علیکم<br>خوش آمدید  </div>
   </body>
</html>

【讨论】：