Question

如何通过CSS制作更大胆的字体以及为什么font-weight: bold属性不适用于此处的顶级菜单：https://tiarstudio.ro/index.php？

Answer 1

您可以使用

font-weight:value;

其中值可以是100,200,300到900

或者您可以使用

font-weight:lighter, bold, bolder;

Answer 2

正如评论中提到的@evolutionxbox，您的字体需要支持多个权重才能使Raj's answer中提到的字体权重起作用。

我在您的页面中看到以下内容

<link href="https://fonts.googleapis.com/css?family=Julius+Sans+One:regular&amp;subset=latin" rel='stylesheet' type='text/css'>

现在，如果您打开该CSS文件 - 直接访问该链接 - 您将在其内容中看到以下内容：

@font-face {
  font-family: 'Julius Sans One';
  font-style: normal;
  font-weight: 400;
  src: local('Julius Sans One'), local('JuliusSansOne-Regular'), url(https://fonts.gstatic.com/s/juliussansone/v5/iU65JP9acQHPDLkdalCF7qW9WqC4OJJkfgA_jCJuPCQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

注意它是如何说出font-weight: 400;

这告诉您该特定字体不支持粗体，这就是为什么它在您的情况下不起作用。

至于其他字体

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface:regular&amp;subset=latin" rel='stylesheet' type='text/css'>

以下是其他字体CSS表的竞赛。同样也适用，字体不支持粗体

/* latin-ext */
@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  src: local('Abril Fatface'), local('AbrilFatface-Regular'), url(https://fonts.gstatic.com/s/abrilfatface/v8/X1g_KwGeBV3ajZIXQ9VnDn1PgMwFt2V-WJ2uOZ4WXLU.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  src: local('Abril Fatface'), local('AbrilFatface-Regular'), url(https://fonts.gstatic.com/s/abrilfatface/v8/X1g_KwGeBV3ajZIXQ9VnDjxObtw73-qQgbr7Be51v5c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

<强>加成

话虽如此，我想知道......如果你复制谷歌字体CSS表格的内容 - 然后将它们添加到主样式表 - 然后修改字体 - 怀特线以包含更多的战斗......那会有什么区别？我留给专家回答。

/* Start Julius Sans One */
@font-face {
  font-family: 'Julius Sans One';
  font-style: normal;
  font-weight: 100,200,300,400,500,600,700,800,900;
  src: local('Julius Sans One'), local('JuliusSansOne-Regular'), url(https://fonts.gstatic.com/s/juliussansone/v5/iU65JP9acQHPDLkdalCF7qW9WqC4OJJkfgA_jCJuPCQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
} 
/* End Julius Sans One */

/* Start Abril Fatface */
/* latin-ext */
@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 100,200,300,400,500,600,700,800,900;
  src: local('Abril Fatface'), local('AbrilFatface-Regular'), url(https://fonts.gstatic.com/s/abrilfatface/v8/X1g_KwGeBV3ajZIXQ9VnDn1PgMwFt2V-WJ2uOZ4WXLU.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 100,200,300,400,500,600,700,800,900;
  src: local('Abril Fatface'), local('AbrilFatface-Regular'), url(https://fonts.gstatic.com/s/abrilfatface/v8/X1g_KwGeBV3ajZIXQ9VnDjxObtw73-qQgbr7Be51v5c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* End Abril Fatface */

/* Start Font-family Settings */
.Julius-font {font-family: "Julius Sans One"}
.Abril-font {font-family: "Abril Fatface"}
/* End Font-family Settings */


/* Start Font-weight Settings */
.f-100 {font-weight: 100}
.f-200 {font-weight: 200}
.f-300 {font-weight: 300}
.f-400 {font-weight: 400}
.f-500 {font-weight: 500}
.f-600 {font-weight: 600}
.f-700 {font-weight: 700}
.f-800 {font-weight: 800}
.f-900 {font-weight: 900}
/* End Font-weight Settings */

<h1>Abril-font</h1>
<p class="Abril-font f-100">Test 100</p>
<p class="Abril-font f-200">Test 200</p>
<p class="Abril-font f-300">Test 300</p>
<p class="Abril-font f-400">Test 400</p>
<p class="Abril-font f-500">Test 500</p>
<p class="Abril-font f-600">Test 600</p>
<p class="Abril-font f-700">Test 700</p>
<p class="Abril-font f-800">Test 800</p>
<p class="Abril-font f-900">Test 900</p>

<h1>Julius-font</h1>
<p class="Julius-font f-100">Test 100</p>
<p class="Julius-font f-200">Test 200</p>
<p class="Julius-font f-300">Test 300</p>
<p class="Julius-font f-400">Test 400</p>
<p class="Julius-font f-500">Test 500</p>
<p class="Julius-font f-600">Test 600</p>
<p class="Julius-font f-700">Test 700</p>
<p class="Julius-font f-800">Test 800</p>
<p class="Julius-font f-900">Test 900</p>

Answer 3

已经应用了CSS样式：

.xprt_mega_menu ul.sf-menu > li > a {
    margin-right: 25px;
    margin-left: 25px;
    font-weight: bold;
}

所以它已经大胆了。我尝试了900（最大）而不是粗体（700），并且没有明显的变化。

Answer 4

font-weight: bold;

这适用于任何网站。我打开了你的网站，顶部菜单中的文字已经是粗体。甚至有两个CSS规则负责 - .xprt_mega_menu ul.sf-menu＆gt; li> a {font-weight：bold}和.xprt_mega_menu ul.sf-menu＆gt; li> a {font-weight：700}。

否则你可以使用如下值：font-weight：100 - 900;但是，并非所有字体都支持所有这些值。通常使用font-weight：700来通过这种方法使文本变为粗体。

Answer 5

使用font-weight属性。它可以包含以下值：100-900，normal，bold，bolder和lighter。您可以阅读更多相关信息here。

.bold {
  font-weight: bold;
}

<span class="bold">I'm a bold text!</span>

Answer 6

使用

font-weight: value;

值是：

font-weight: bold;
font-weight: bolder;
font-weight: light;

或使用：100-900
不要忘记分号！

如何通过CSS使字体更大胆？

6 个答案: