Setting fonts in CSS: each style by name or property weight?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
16 views
Good evening ladies and gentlemen! Tell me at the moment, the relevance of the connection of fonts in this way:
(example with Open Sans, this is just an example, because you want the web font may not be Google or other services)
@font-face { font-family: "OpenSansRegular"; src: url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.eot"); src: url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.eot?#iefix")format("embedded-opentype"), url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.woff") format("woff"), url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; } @font-face { font-family: "OpenSansLight"; src: url("../fonts/OpenSans/OpenSansLight/OpenSansLight.eot"); src: url("../fonts/OpenSans/OpenSansLight/OpenSansLight.eot?#iefix")format("embedded-opentype"), url("../fonts/OpenSans/OpenSansLight/OpenSansLight.woff") format("woff"), url("../fonts/OpenSans/OpenSansLight/OpenSansLight.ttf") format("truetype"); font-style: normal; font-weight: normal; }

etc.

I don't really like this type of connection, it is not easy, each style is font-family: 'OpenSans[style]', and at least there is now a preprocessor, it's much easier to just put font-weight: [weight].

I read about half a year ago somewhere an article about this, and there's the emphasis on this style, and if you connect to change the font-weight and font-style that is not good, I don't remember why.

Who is experience share your wisdom please!
by | 16 views

2 Answers

0 like 0 dislike
Correctly so:
@font-face { font-family: 'OpenSans'; src: url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.eot"); ... font-weight: 400; font-style: normal; } @font-face { font-family: 'OpenSans'; src: url("../fonts/OpenSans/OpenSansLight/OpenSansLight.eot"); ... font-weight: 300; font-style: normal; }


Example usage:
html { font-family: 'OpenSans', sans-serif; font-size: 14px; } .example-with-regular-text { // nothing } .example-with-light-text { font-weight: 300; }
by
0 like 0 dislike
Will work both, but more convenient, of course, manipulation of style properties/weight.
Option with hotel names were popular a few years ago, because in those days it was more cross-browser. But today there is no reason to do so.
by

Related questions

0 like 0 dislike
4 answers
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
asked May 12, 2019 by fessracha
110,608 questions
257,187 answers
0 comments
40,253 users