“Bold on bold” font problem location

Leave a Comment / / David | 前端技术分享

This article introduces the matching rules for custom fonts using @font-face through a problem location.

background:

After using the style automatically generated by Blue Lake, there is a problem of bold on bold

 1
 2
 3
 4
 5
 
 .style_from_lanhu {
 font-size : 40px ;
 font-family : DINPro-Bold, DINPro;
 font-weight : bold;
 }

, i.e. DINPro-Bold overlays font-weight: bold; with a bolder problem.

Phenomenon:

  1. Under Chrome on the macOS side, the style will not be bold and the style will be normal;
  2. Under Safari on the macOS side, the bold upper is bold, and the style is abnormal;
  3. Under Safari&Chrome on the iPhone side, the bold upper is bold, and the style is abnormal;

reason:

The writing in our custom font is:

 1
 2
 3
 4
 5
 6
 
 @font-face {
 font-family : "DINPro-Bold" ;
 font-style : normal;
 font-weight : normal;
 src : url ( "/lib/DINPro-Bold.woff" ) format ( "woff" );
 }

The meaning of the above writing is: when font-family is DINPro-Bold, and font-style is normal, and font-weight is normal, hit DINPro-Bold.woff font.

Safari strictly abides by the above rules of font hits. When Safari sees the .style_from_lanhu style, Safari’s processing is:

  1. font-family: DINPro-Bold directly hits the DINPro-Bold.woff font, (DINPro followed by DINPro DINPro-Bold is ignored)
  2. Then font-weight: bold; and bold again, this is the reason for bold on bold.

Modification:

Change the font-weight: normal; in @font-face to font-weight: bold; , after the modification font-family: DINPro-Bold overlay font-weight: bold; two conditions together, will hit the font.

As for why Chrome on the macOS side does not strictly follow the font hit rule, the reason is unknown.

Going a step further:

Why is the style code generated by sketch so concise, but how many lines does Blue Lake need to do?

Compare the difference

 1
 2
 3
 4
 5
 6
 7
 8
 9
 
 .style_from_sketch {
 font-family : DINPro-Bold;
 font-size : 40px ;
 }
 .style_from_lanhu {
 font-size : 40px ;
 font-family : DINPro-Bold, DINPro;
 font-weight : bold;
 }

Personal speculation is that Blue Lake is compatible with another way of writing @font-face , and it is also a more mainstream way of writing, that is, family:DINPro && weight:bold hits DINPro-Bold.woff font.

 1
 2
 3
 4
 5
 6
 
 @font-face {
 font-family : "DINPro" ;
 font-style : normal;
 font-weight : bold;
 src : url ( "/fonts/DINPro-Bold.woff" ) format ( "woff" );
 }

On the other hand, when the custom font is not downloaded, it has a default bold effect, and the overall style will not be too obtrusive.

refer to:

https://justineo.github.io/slideshows/font/#/3/1

https://www.mulingyuer.com/archives/126/

https://fonts.google.com/knowledge/using_type/using_web_fonts

https://www.zachleat.com/web/css-tricks-web-fonts/

https://css-tricks.com/the-best-font-loading-strategies-and-how-to-execute-them/#loading-fonts-with-self-hosted-fonts

https://www.zachleat.com/web/comprehensive-webfonts/#font-display

https://transfonter.org/

https://drafts.csswg.org/css-fonts-3/#font-face-rule

https://drafts.csswg.org/css-fonts-3/#font-matching-algorithm

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

This article is reprinted from https://lvdawei.com/post/font-face-bugfix/
This site is for inclusion only, and the copyright belongs to the original author.

Leave a Comment