Question

我想使用此抢先体验Google字体： https://fonts.google.com/earlyaccess#Noto+Nastaliq+Urdu+Draft

在我的tumblr博客上的

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

它确实支持Google字体，但我不知道如何使用抢先使用的Google字体。

我尝试在之后添加 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代码。

非常感谢您的帮助：）

Answer 1

要使用任何Google字体，只需使用网站上提供的代码段即可。您可以将以下几行添加到您的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属性-但由于您尚未发布任何代码，我暂时无法知道。

Answer 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>

我可以在tumblr博客上使用抢先体验Google字体吗？

2 个答案: