1. 首頁
  2. 問答
  3. 如何通過CSS製作字體大膽？

如何通過CSS製作字體大膽？

2017-06-17 42 views

回答

2

您可以使用

font-weight:value;

其中value可以是從100,200,300到900

，或者您可以使用

font-weight:lighter, bold, bolder;

來源

2017-06-17 15:44:58 Raj

0

有已經應用了CSS樣式：

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

S這已經是大膽的了。我嘗試了900（最大值）而不是粗體（700），並沒有發現明顯的變化。

來源

2017-06-17 15:52:40

0 
font-weight: bold;

這可以在任何網站上使用。我打開了您的網站，頂部菜單中的文本已經大膽。甚至有兩個CSS規則負責 - .xprt_mega_menu ul.sf-menu> li> a {font-weight：bold}和.xprt_mega_menu ul.sf-menu> li> a {font-weight：700}。

否則，您可以使用如下值：font-weight：100 - 900;但是，並非所有字體都支持所有這些值。通常使用font-weight：700來通過這種方法使文本粗體。

來源

2017-06-17 15:53:18 Kaloyan

0

由於@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表的內容 - 然後將它們添加到主樣式表 - 然後修改font-wight行以包含更多的wights ...會有什麼區別嗎？我讓專家來回答。

/* 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>

來源

2017-06-17 15:59:23

+1

感謝您的答覆。這是我所懷疑的，但是你提供了證據 - 字體不支持修改其重量屬性。我也嘗試通過自定義CSS字段將google字體CSS表格的內容添加到我的主CSS文件中來覆蓋其設置。這是迄今爲止最好的答案，但仍將等待解決方法。 – asknomore

0

使用font-weight財產。它可以包含以下值：100-900,normal,bold,bolder和lighter。你可以閱讀更多關於它here。

.bold { 
 
    font-weight: bold; 
 
}
<span class="bold">I'm a bold text!</span>

來源

2017-06-17 16:06:32 hammy

相關問題

 相關問題