Wie mache ich eine Schriftart fett durch CSS?

Question

Wie macht man eine Schriftart fetter durch CSS und warum die font-weight: bold Eigenschaft für das obere Menü hier nicht funktioniert: https://tiarstudio.ro/index.php?

Answer 1

können Sie verwenden

font-weight:value; 

wo Wert von 100.200.300 bis 900

sein können, oder Sie können verwenden

font-weight:lighter, bold, bolder; 

Answer 2

Es gibt bereits eine CSS-Stil angewendet:

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

S o es ist schon fett. Ich versuchte 900 (max) statt fett (700), und es gab keine erkennbare Änderung.

Answer 3

font-weight: bold; 

Dies funktioniert in jeder Website. Ich habe Ihre Website geöffnet und der Text im Menü oben war bereits fett. Es gab sogar zwei CSS-Regeln, die dafür verantwortlich waren - .xprt_mega_menu ul.sf-menu> li> a {font-weight: bold} und .xprt_mega_menu ul.sf-menu> li> a {font-weight: 700}.

Ansonsten können Sie einen Wert wie: font-weight: 100 - 900; Nicht alle Schriftarten unterstützen jedoch alle diese Werte. In der Regel wird mit font-weight: 700 ein Text über diesen Ansatz fett dargestellt.

Answer 4

Da @evolutionxbox in den Kommentaren erwähnt wird, muss Ihre Schriftart mehrere Gewichtungen unterstützen, damit die in Raj's answer genannten Schriftartengewichte funktionieren.

Ich sehe die folgenden in Ihrer Seite

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

Nun, wenn Sie die CSS-Datei öffnen - indem Sie den Link direkt zu besuchen - Sie werden die folgenden in seinen Inhalt sehen:

@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; 
} 

Beachten Sie, wie es sagt font-weight: 400;

Das sagt Ihnen, dass diese bestimmte Schriftart nicht fett unterstützt und deshalb in Ihrem Fall nicht funktioniert.

Was die andere Schrift

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

Im Folgenden sind die Wettbewerbe für die anderen CSS-Blatt der Schriftart. Das gleiche gilt auch, die Schriftart nicht fett

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

---

Bonus

Mit diesem wird gesagt, ich frage mich unterstützt ... Wenn Sie den Inhalt der Google-Schrift CSS Blatt kopieren - Fügen Sie sie dann zum Haupt-Stylesheet hinzu - und modifizieren Sie dann die font-wight-Zeilen, um mehr Wights einzufügen ... würde das einen Unterschied machen? Ich überlasse es den Experten zu antworten.

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

Verwenden Sie die font-weight Eigenschaft. Es kann folgende Werte enthalten: 100-900, normal, bold, bolder und lighter. Sie können mehr darüber lesen here.

.bold { 
 
    font-weight: bold; 
 
}

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