Best IT Recipes

How to set a bold font using CSS? The font weight of 600 does not make it look like the bold that I see in my Photoshop file

I am doing Photoshop-to- XHTML conversion, and the website developer used the Myriad Pro Semi-bold font, which looks good in the photoshop file, but when I try to use the bold version in CSS, it looks almost like a normal bold font that is too bold for my purpose. Is there a way to achieve a more beautiful bold in HTML and CSS, or am I just stuck with "font-weight: 600;"?

+54
css fonts
Jan 05 '12 at 0:00
source share
6 answers

Practical way: set font-family to a value that is the specific name of the bold variant, e.g.

 font-family: "Myriad pro Semibold"

if it's a name. (Personally, I use my own font enumeration tool , which works in Internet Explorer only to see fonts on my system by names that can be used in CSS.)

In this approach, font-weight not required (and probably not better set).

Fonts in a book are poorly implemented in web browser browsers: they cannot find a specific version of the weight except bold. The workaround is to include the information in the font's last name, even if that’s not how things should work.

Testing with the Segoe user interface, which often exists in different versions of fonts on Windows systems, I was able to make Internet Explorer 9 choose the correct version using the logical approach (using the Segoe UI font family and other font-weight ), but this failed for Firefox 9 and Chrome 16 (normal and greasy only). For example, in all of these browsers, the font-family: Segoe UI Light setting is working fine.

+40
Jan 05 2018-12-12T00:
source share

In CSS, for the font-weight property, the value: normal defaults to 400 and bold to 700.

If you want to specify other weights, you need to specify the value of the number. This numeric value must be supported for the font family that you are using .

For example, you would define bold:

 font-weight: 600;

Here's the JSFiddle using the Open Sans font family loaded with the above weights.

+59
May 05 '14 at 17:35
source share

For me, the following works well. Just add it. You can edit it according to your requirement. This is just a nice trick that I use.

 text-shadow : 0 0 0 #your-font-color;
+28
Dec 14 '13 at 1:47
source share

font-family: 'Open Sans'; font-weight: 600; important to change to another font family

+2
Aug 31 '16 at 2:45
source share

By mid-2016, the Chromium engine (v53) supports only 3 underline styles:

Plain text, bold and super-bold ...

  <div style="font:normal 400 14px Arial;">Testing</div> <div style="font:normal 700 14px Arial;">Testing</div> <div style="font:normal 800 14px Arial;">Testing</div>
+1
Sep 23 '16 at 12:30
source share

Select fonts, indicating the weights you need at boot

Font families consist of several separate fonts.

For example, extra-bold will make the font look completely different, say, in Photoshop, because you choose a different font. The same goes for italics, which can look very different. Installing font-weight:800 or font-style:italic can cause your web browser to make every effort to increase or decrease the normal font in the family.

Although you are downloading a font family, you must specify the weight and styles required by some web browsers to allow you to select a different font in the family using font-weight and font-style .

Example

This example specifies light, normal, regular italic, bold, and especially bold fonts in the Open Sans font family:

 <html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800"> <style> body { font-family: 'Open Sans', serif; font-size: 48px; } </style> </head> <body> <div style="font-weight:400">Didn't work with all the fonts</div> <div style="font-weight:600">Didn't work with all the fonts</div> <div style="font-weight:800">Didn't work with all the fonts</div> </body> </html>

Link

(Quora warning, please remove if not permitted.)

https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts

Testing

Tested to work on Firefox 66.0.3 on Mac and Firefox 36.0.1 on Windows.

Non-Google Fonts

Other fonts must be uploaded to the server, their style and weight are indicated by their individual names.

System fonts

Saying nothing about fonts, about which device is visiting your site or which fonts are installed in its OS.

(You can use fallback options with serifs and sans serifs, but you will get a font mapped to them depending on the version of the web browser used, within the fonts available in the version of the OS in which it works, and not in accordance with what you developed.)

Testing should be done with a temporarily removed font from your system to make sure your design works.

0
Apr 24 '19 at 13:35
source share


More articles:


All Articles