谷歌app使用的是什么字体_如何使用Google字体

谷歌app使用的是什么字体

I am a huge proponent of using System Fonts, which are fast, lightweight and work great, but sometimes you need to be a little fancy.

我大力支持使用System Fonts ，这些字体快速，轻便且性能出色，但有时您需要花哨一点。

You need a specific font that will make your designs look good.

您需要一种可以使您的设计看起来不错的特定字体。

Maybe a nice font like Slabo, Lato or Raleway.

也许像Slabo，Lato或Raleway这样的好字体。

Google provides, as part of its numerous services, a tool called Google Fonts, which (as I write this) supports 992 font families:

Google作为其众多服务的一部分，提供了一个称为Google字体的工具，该工具(我写这篇文章)支持992种字体家族：

The interface is a bit overwhelming and as a person not expert in fonts, I am definitely confused at which font should I choose.

界面有点让人不知所措，作为一个不是字体专家的人，我无疑对应该选择哪种字体感到困惑。

I typically search for “best google fonts” on Google and I look at the articles I get, to get an idea of how a font could look like. Looking at dozens of fonts on Google Fonts is not ideal for that, and some sites make it easy with colors, like on this post:

我通常会在Google上搜索“最佳google字体”，然后查看获得的文章，以了解字体的外观。 在Google字体上查看数十种字体并不理想，有些网站使颜色变得更容易，例如这篇文章 ：

Let’s take one of the fonts I used in one of my websites: Press Start 2P.

让我们采用在一个网站中使用的字体之一： 按Start 2P 。

It’s a great font for a retro website. I used it in my Web Platform course homepage, to which I wanted to give a computer-y look.

这是复古网站的绝佳字体。 我在Web平台课程主页中使用了该页面 ，并希望对其进行计算机化的外观。

On the font page, you can see how each character is rendered:

在字体页面上，您可以看到每个字符的呈现方式：

Scrolling down you can see who is the designer, and an important part: the license. In this case the page says

向下滚动，您可以看到谁是设计师，以及重要的部分：许可证。 在这种情况下，页面上会显示

You can use them freely in your products & projects - print or digital, commercial or otherwise. However, you can’t sell the fonts on their own.

您可以在产品和项目中自由使用它们-打印或数字，商业或其他方式。 但是，您不能单独出售字体。

which grants us a lot of permissions.

这给了我们很多权限。

We can use the font as we want, even in a commercial project, but we can’t resell it.

即使在商业项目中，我们也可以根据需要使用字体，但是我们不能转售它。

At the bottom we have an interesting section that lists which fonts are often paired with this one.

在底部，我们有一个有趣的部分，列出了经常与该字体配对的字体。

With fonts I try to be as conservative as possible because most of the times I don’t know what I’m doing and seeing what other people do and copying the most reasonable choice is a good strategy.

使用字体时，我会尽量保持保守，因为大多数时候我不知道我在做什么，看看别人在做什么并复制最合理的选择是一个好策略。

Now you can press the “Download family” link on the top right of the page to download the font TTF file, which you can install on your computer and use it as a font in your desktop programs.

现在，您可以按页面右上角的“下载系列”链接下载字体TTF文件，您可以将其安装在计算机上并将其用作桌面程序中的字体。

But you don’t need to do so to use the font on a website.

但是您无需这样做即可在网站上使用字体。

What you can do is click “Select this style” next to each style you want, in the Styles section

您可以做的就是在“样式”部分中，单击所需每种样式旁边的“选择此样式”。

This will add it to the Selected families sidebar:

这会将其添加到“选定的家庭”侧边栏中：

Once you are done with it, you click the Embed tab and there you can find the code you need to enter in your project: a link element to include the font in the HTML, and the CSS rule to apply the font family to specific elements:

完成后，单击“嵌入”选项卡，您可以在其中找到需要在项目中输入的代码：一个link元素，用于将字体包含在HTML中；以及CSS规则，用于将字体系列应用于特定元素：

So in this case what you need to do is to add this HTML:

因此，在这种情况下，您需要添加以下HTML：

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

and then this CSS:

然后这个CSS：

body { /* use your favorite selector here */
  font-family: 'Press Start 2P', cursive;
}

We have a fallback font in case the font can’t be loaded, or takes too much to load.

我们提供了一个后备字体，以防字体无法加载或加载过多。

Another way to include the font is using the @import directive in the CSS, so you don’t need to use the link attribute in the HTML - all is in the CSS file:

包含字体的另一种方法是在CSS中使用@import指令，因此您无需在HTML中使用link属性-全部都在CSS文件中：

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

But this approach has one limitation: it’s slower. If the font is linked in the HTML, the browser will make a request to the font URL as soon as it reads the HTML.

但是这种方法有一个局限性：比较慢。 如果字体是在HTML中链接的，则浏览器将在读取HTML后立即请求字体URL。

If the font is linked in the CSS, the browser first has to make a request to load the CSS, then it can make a request to load the font URL.

如果在CSS中链接了字体，则浏览器必须首先请求加载CSS，然后才能请求加载字体URL。

And a few milliseconds lost here can make the difference between a page that loads instantly with the right font, and a page that first loads with the fallback font, and then loads the correct font when it’s available.

此处损失的几毫秒可能会导致立即以正确的字体加载的页面与首先加载后备字体的页面，然后在可用时加载正确的字体的页面有所不同。

翻译自: https://flaviocopes.com/google-fonts/

谷歌app使用的是什么字体