0

Segments: 

@font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
     url('../font/jura-demibold.woff') format('woff'),
     url('../font/jura-demibold.ttf') format('truetype'),
     url('../font/jura-demibold.svg#RobotoLight') format('svg');
font-weight: normal;
font-style: normal; }

From the post, I learn its value is a prioritized by comma-separated list. Then, from the post, I learned such url's layout is for compatibility of browsers(especially ie9).

However, I still don't know the priority of semicolon, so I am confused, why I have never seen such layout below? is it correct version? 

@font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot') format('eot'),
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
     url('../font/jura-demibold.woff') format('woff'),
     url('../font/jura-demibold.ttf') format('truetype'),
     url('../font/jura-demibold.svg#RobotoLight') format('svg');
font-weight: normal;
font-style: normal; }
Gautam Naik
  • 8,990
  • 3
  • 27
  • 42
Chen Li
  • 4,824
  • 3
  • 28
  • 55
  • FYI: The `..` in `../font/jura-demibold.eot` won't mean anything if used in a web request. That's a file system shortcut to move up one directory, but URLs don't work like file systems. – JDB Apr 23 '18 at 15:36
  • @JDB Ok, I just extract the segments from one website. – Chen Li Apr 23 '18 at 15:39

2 Answers2

1

The value of the src property is a prioritized list, so each browser will use the first font in the list that is in a format it supports.

https://www.w3.org/TR/css-fonts-3/#src-desc

eNinjaPL
  • 23
  • 4
  • Does the priority also make sense to semicolon list? – Chen Li Apr 23 '18 at 15:44
  • Semicolon is just to work around a bug in IE8 and older. They have a bug in their parsers for the src attribute which causes them to 404 if more than 1 font source is in the css. You could add anything instead of ?#iefix as long as you use a question mark first – eNinjaPL Apr 24 '18 at 08:03
0
@font-face {
font-family: 'RobotoLight';
font-weight: normal;
font-style: normal;
src: url('../font/jura-demibold.eot') format('eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
     url('../font/jura-demibold.woff') format('woff'),
     url('../font/jura-demibold.ttf') format('truetype'),
     url('../font/jura-demibold.svg#RobotoLight') format('svg');
 }

That is how I would do it and do it on production sites. The only change is adding a semi-colon at the end of your first src attribute.

Ben Davies
  • 426
  • 3
  • 14