title: Can't understand the bulletproof @font-face CSS rule
body: <p>Before marking this as duplicate please read through my doubts. I searched thoroughly on the web(<strong>particularly stackoverflow</strong>) &amp; couldn't get the doubts cleared. This question may seem lengthy at a glance but it contains crucial issues which others also want to know.</p>
  
  <p>I'm trying to gain a slightly deep knowledge in the bulletproof <code>@font-face</code> rule and the people out there are confusing me. Please suggest me on this guys.
  So, here's the latest bulletproof code as suggested by <strong>Font-Spring</strong> (<a href="http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/" rel="noreferrer">http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/</a>) along with the IE9 compatibility mode issue solved:</p>
  
  <pre><code>@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }
  </code></pre>
  
  <p>The one without the <strong>IE9 Compatibility Mode Fix</strong>, also by <strong>Font-Spring</strong>(<a href="http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/" rel="noreferrer">http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/</a>), looks like this:</p>
  
  <pre><code>@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
       url('myfont-webfont.woff') format('woff'), 
       url('myfont-webfont.ttf')  format('truetype'),
       url('myfont-webfont.svg#svgFontName') format('svg');
  }
  </code></pre>
  
  <p>Currently, I'm reading a book "The Book Of CSS3" by Peter Gasston.
  It follows the bulletproof rule with <strong>IE9 Compatibility Mode</strong> fix as stated by the Font-Spring. He says that the rule with a query string <code>?</code> in the second <code>src</code> property is responsible for IE9 Compat. Mode fix. But, font-spring holds the first <code>src</code> property responsible for IE9 Compat. Mode fix. I'm not able to learn this syntax without understanding it completely.</p>
  
  <p>My serious issues are rather smaller. First of all I wanna know if only the <code>?#iefix</code> can prevent the parsing error or it could be something like <code>?iefix</code> (without <code>#</code>) or it could be <code>?xyz</code> or <code>?#abc</code>. Is it necessary to write exactly <code>?#iefix</code>?</p>
  
  <p>Secondly,</p>
  
  <ul>
  <li>I can't feel how this <code>@font-face</code> rule gets parsed, how
  IE8 decides which of the <code>src</code>
  properties is to be used for <code>eot</code> font. And if IE9 has no issues with parsing even in the
  compatibility mode, how will it decide which font-format to use? Will
  the IE9 in compatibility mode break on query string font url &amp; if not
  then why not?</li>
  <li>Can somebody tell me if I look at the whole bulletproof rule stated
  above, how IE8, IE9 in compatibility mode, IE9 in normal mode &amp; other
  browsers will parse it? How will a browser decide from several fonts which one to use if it supports majority of them. What is the order in which the browser looks <code>url</code> values and <code>src</code> properties? </li>
  <li>Is it like that an alone <code>src</code> property without any <code>local()</code> and
  <code>format()</code> values and with a correct <code>eot</code> format will be accepted by IE8 and it will not go further
  to the next <code>src</code> property in which other formats are defined? Or will it still go to the next <code>src</code>
  property &amp; download fonts from there?</li>
  <li>If there will be a query string (<code>?</code>) in the next <code>src</code> property,
  will IE8 (IE9 in compatibility mode considered as well) download the <code>eot</code> font two times? And if there will be no
  query string, then will it accept the <code>eot</code> font from first property
  and won't break or will it break &amp; don't apply any custom defined
  font even from the first <code>src</code> property?</li>
  </ul>
  
  <p>Also, does IE9 in normal mode support <code>eot</code> format?
  Won't the bulletproof syntax still work if I just remove the whole query string declaration like:</p>
  
  <pre><code>@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE6-IE8 as well as IE9 Compat. Mode */
  src: url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }
  </code></pre>
  
  <p>Won't the above still work in all the possible cases? IE6-8 will have the first <code>src</code> along with the IE9 in compatibility mode and all other browsers will follow the rest of rules.</p>
  
  <p>Would the above rule suggested by me work same with the <code>local()</code> value as follows:</p>
  
  <pre><code>@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE6-IE8 &amp; IE9 Compat. Mode */
  src: local('MyWebFont'), /* To fix IE6-IE8 and IE9 Compat. Mode */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }
  </code></pre>
  
  <p>Whether in IE8 or in IE9 compatibility mode, <code>local()</code> value will make them go away.. Would IE9 in normal mode use <code>eot</code> or <code>woff</code> from above rule?? If it does use <code>eot</code>, can we make a slight change to first <code>src</code> property like this:</p>
  
  <pre><code>src: url('webfont.eot?#iefix') format('eot');
  </code></pre>
  
  <p>IE9 will ignore this property as it contains <code>eot</code> and move on further to use <code>woff</code>, am I right? Also, if I again make a change to this rule itself like this:</p>
  
  <pre><code>src: url('webfont.eot?#iefix') format('embedded-opentype');
  </code></pre>
  
  <p>Would IE9 now use <code>eot</code> format or still go on with <code>woff</code>?</p>
  
  <p>This is all I want to know and yes I think these questions definitely need an answer.</p>