Question

<head>
   <title>Privacy Policy</title>
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">



<h2>Brief summary of our Privacy Policy</h2>

    <div class="text">

        <p>We value your privacy.</p>

            <h3>General</h3>

CSS

body
{
  background-color: black;
  font-family: 'Roboto',sans-serif;
  color: white;
}

h1 {
  color: #fffffe;
  font-size: 20pt;
  letter-spacing: 0.2pt;
  font-weight: 400;
}

h2 {
  color: #fffffe;
  font-size: 40pt;
  text-align: center;
  font-weight: 100;
}

图片的第一部分是我的结果。
第二部分是我需要得到的地方第三部分来自谷歌字体。

Answer 1

您需要选择public ActionResult About() { ViewBag.Message = "Your application description page."; Test(); return View(); } private async void Test() { await Task.Delay(20000); throw new Exception("Blah"); }字体粗细。

h2 {
  color: #fffffe;
  font-size: 40pt;
  text-align: center;
  font-weight: 100;
}

h1 {
  color: #fffffe;
  font-size: 20pt;
  letter-spacing: 0.2pt;
  font-weight: 400;
}

body {
  background-color: black;
  font-family: 'Roboto', sans-serif;
  color: white;
}

Answer 2

默认情况下，Google Web Fonts仅加载权重400。

您需要在网址中指定您想要的其他权重，方法是在冒号后附加它们。

因此，对于您的情况，网址应为：

<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">

来源：https://developers.google.com/fonts/docs/getting_started

Answer 3

了解字体和CSS如何协同工作的时间。

单个字体文件（因此，在现代计算机上的个人ttf和otf文件中，对于包含woff和woff2文件的网络而言编码单重量。字体如＆＃34; Roboto-Regular＆＃34;只包含一个权重的字形，因此如果CSS仅加载该字体，您可以根据需要更改font-weight，但它什么也不做，因为您还没有告诉CSS引擎什么去做。它只是使用相同的字体。

（2018编辑：OpenType现在支持可变字体，这意味着如果字体有一个fvar表，它可用于渲染字体的全部权重/变化。浏览器支持仍然是在编辑时被弄清楚，因此不会改变答案的其余部分。但是）

相反，您需要告诉CSS引擎您需要多种不同的字体用于不同的权重。如果您请求不同的权重（如其他答案中所述），Google字体会为您执行此操作，但实际情况是Google字体会生成如下所示的CSS：

@font-face {
  font-family: Roboto;
  font-weight: normal;
  font-style: normal;
  src: url(roboto-regular.woff) format('WOFF')
}

@font-face {
  font-family: Roboto;
  font-weight: 300;
  font-style: normal;
  src: url(roboto-light.woff) format('WOFF')
}

@font-face {
  font-family: Roboto;
  font-weight: 200;
  font-style: normal;
  src: url(roboto-thin.woff) format('WOFF')
}

@font-face {
  font-family: Roboto;
  font-weight: 100;
  font-style: normal;
  src: url(roboto-ultra-thin.woff) format('WOFF')
}

etc.

正因为如此，您的浏览器的CSS引擎现在知道您说font-weight: 100的原因，它只需要robot-ultra-thin字体而不是常规字体。

＆＃34;但为什么这适用于像Times？＆＃34;

这样的事情

好问题：因为系统字体已经是不同字体文件的大集合。请注意，当您使用CSS时，您需要font-family。＆＃34;家庭＆＃34;部分很重要：您不是要求单独的字体，而是要求整个字体系列，并且默认情况下，您要求的是该系列：正常，重量：正常版本。您的操作系统完全能够找到合适的单一字体文件，以便为此目的提供给浏览器的CSS引擎，因此当您font-family: Times时，您的浏览器实际上正在加载Times-regular.ttf或类似的东西。

但是如果一个字体系列的重量不如CSS重量那么多，那么就没有多少说法＆＃34;重量：100＆＃34;将打造一个没有超薄字体的字体系列超薄。如果字体资源不存在（或者因为它确实不存在，或者因为你忘了教CSS你需要为一个权重加载什么字体文件：100）结果是未定义的，尽管是可预测的（浏览器最终将使用知道的最接近的匹配字体），并且您不应该使用具有未定义行为的CSS。你已经确定了它的定义=）

为何选择google font＆＃39; Roboto＆＃39;重量100后仍然看起来很胖？

3 个答案: