css-fonts/Fonts.html

changeset 8860
dbd4337ff7d7
parent 8859
1bd7f210c461
child 8863
8d1905d1c3cf
     1.1 --- a/css-fonts/Fonts.html	Fri Aug 16 10:14:45 2013 +0900
     1.2 +++ b/css-fonts/Fonts.html	Fri Aug 16 10:41:46 2013 +0900
     1.3 @@ -2211,7 +2211,7 @@
     1.4     <pre>
     1.5  @font-face {
     1.6    font-family: Gentium;
     1.7 -  src: url(http://example.com/fonts/Gentium.ttf);
     1.8 +  src: url(http://example.com/fonts/Gentium.woff);
     1.9  }
    1.10  
    1.11  p { font-family: Gentium, serif; }
    1.12 @@ -2332,9 +2332,9 @@
    1.13     font).
    1.14  
    1.15    <pre>
    1.16 -src: url(fonts/simple.ttf);   /* load simple.ttf relative to stylesheet location */
    1.17 -src: url(/fonts/simple.ttf);  /* load simple.ttf from absolute location */
    1.18 -src: url(fonts.svg#simple);   /* load SVG font with id 'simple' */
    1.19 +src: url(fonts/simple.woff);   /* load simple.woff relative to stylesheet location */
    1.20 +src: url(/fonts/simple.woff);  /* load simple.woff from absolute location */
    1.21 +src: url(fonts.svg#simple);    /* load SVG font with id 'simple' */
    1.22  </pre>
    1.23  
    1.24    <p>External references consist of a URL, followed by an optional hint
    1.25 @@ -2430,8 +2430,8 @@
    1.26  /* regular face of Gentium */
    1.27  @font-face {
    1.28    font-family: MyGentium;
    1.29 -  src: local(Gentium),   /* use locally available Gentium */
    1.30 -       url(Gentium.ttf); /* otherwise, download it */
    1.31 +  src: local(Gentium),    /* use locally available Gentium */
    1.32 +       url(Gentium.woff); /* otherwise, download it */
    1.33  }
    1.34  </pre>
    1.35  
    1.36 @@ -2446,9 +2446,9 @@
    1.37  /* bold face of Gentium */
    1.38  @font-face {
    1.39    font-family: MyGentium;
    1.40 -  src: local(Gentium Bold),   /* full font name */
    1.41 -       local(Gentium-Bold),   /* Postscript name */
    1.42 -       url(GentiumBold.ttf);  /* otherwise, download it */
    1.43 +  src: local(Gentium Bold),    /* full font name */
    1.44 +       local(Gentium-Bold),    /* Postscript name */
    1.45 +       url(GentiumBold.woff);  /* otherwise, download it */
    1.46    font-weight: bold;
    1.47  }
    1.48  </pre>
    1.49 @@ -2537,8 +2537,8 @@
    1.50     <pre>
    1.51  @font-face {
    1.52    font-family: MainText;
    1.53 -  src: url(gentium.eot); /* for use with older non-conformant user agents */
    1.54 -  src: local("Gentium"), url(gentium.ttf);  /* Overrides src definition */
    1.55 +  src: url(gentium.eot);                     /* for use with older user agents */
    1.56 +  src: local("Gentium"), url(gentium.woff);  /* Overrides src definition */
    1.57  }
    1.58  </pre>
    1.59    </div>
    1.60 @@ -2766,7 +2766,7 @@
    1.61     <pre>
    1.62  @font-face {
    1.63    font-family: BBCBengali;
    1.64 -  src: url(fonts/BBCBengali.ttf) format("opentype");
    1.65 +  src: url(fonts/BBCBengali.woff) format("woff");
    1.66    unicode-range: U+00-FF, U+980-9FF;
    1.67  }
    1.68  </pre>
    1.69 @@ -2804,7 +2804,7 @@
    1.70  
    1.71  @font-face {
    1.72    font-family: JapaneseWithGentium;
    1.73 -  src: url(../fonts/Gentium.ttf);
    1.74 +  src: url(../fonts/Gentium.woff);
    1.75    unicode-range: U+0-2FF;
    1.76  }
    1.77  </pre>
    1.78 @@ -2818,14 +2818,14 @@
    1.79  /* fallback font - size: 4.5MB */
    1.80  @font-face {
    1.81    font-family: DroidSans;
    1.82 -  src: url(DroidSansFallback.ttf);
    1.83 +  src: url(DroidSansFallback.woff);
    1.84    /* no range specified, defaults to entire range */
    1.85  }
    1.86  
    1.87  /* Japanese glyphs - size: 1.2MB */
    1.88  @font-face {
    1.89    font-family: DroidSans;
    1.90 -  src: url(DroidSansJapanese.ttf);
    1.91 +  src: url(DroidSansJapanese.woff);
    1.92    unicode-range: U+3000-9FFF, U+ff??;
    1.93  }
    1.94  
    1.95 @@ -2833,7 +2833,7 @@
    1.96     punctuation and symbols - size: 190KB */
    1.97  @font-face {
    1.98    font-family: DroidSans;
    1.99 -  src: url(DroidSans.ttf);
   1.100 +  src: url(DroidSans.woff);
   1.101    unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
   1.102  }
   1.103  </pre>
   1.104 @@ -2848,7 +2848,7 @@
   1.105  </pre>
   1.106  
   1.107     <p>In this case the user agent first checks the unicode-range for the font
   1.108 -    containing Latin characters (DroidSans.ttf). Since all the characters
   1.109 +    containing Latin characters (DroidSans.woff). Since all the characters
   1.110      above are in the range U+0-5FF, the user agent downloads the font and
   1.111      renders the text with that font.</p>
   1.112  
   1.113 @@ -2997,7 +2997,7 @@
   1.114    <pre>
   1.115  @font-face {
   1.116    font-family: GeometricModern;
   1.117 -  src: url(font.ttf);
   1.118 +  src: url(font.woff);
   1.119  }
   1.120  
   1.121  p {
   1.122 @@ -3051,14 +3051,14 @@
   1.123  
   1.124    <pre>
   1.125  /* same origin (i.e. domain, scheme, port match document) */
   1.126 -src: url(fonts/simple.ttf);
   1.127 -src: url(//fonts/simple.ttf);
   1.128 +src: url(fonts/simple.woff);
   1.129 +src: url(//fonts/simple.woff);
   1.130  
   1.131  /* cross origin, different scheme */
   1.132 -src: url(https://example.com/fonts/simple.ttf);
   1.133 +src: url(https://example.com/fonts/simple.woff);
   1.134  
   1.135  /* cross origin, different domain */
   1.136 -src: url(http://another.example.com/fonts/simple.ttf);
   1.137 +src: url(http://another.example.com/fonts/simple.woff);
   1.138  </pre>
   1.139  
   1.140    <h4 id=allowing-cross-origin-font-loading><span class=secno>4.9.2
   1.141 @@ -5627,7 +5627,7 @@
   1.142  
   1.143     <pre>@font-face {
   1.144    font-family: MainText;
   1.145 -  src: url(http://example.com/font.ttf);
   1.146 +  src: url(http://example.com/font.woff);
   1.147    font-variant: oldstyle-nums proportional-nums styleset(1,3);
   1.148  }
   1.149  
   1.150 @@ -5911,6 +5911,10 @@
   1.151     <li>reorder feature precedence such that features implied by other CSS
   1.152      properties override ‘<code class=property>font-variant</code>’
   1.153      settings
   1.154 +
   1.155 +   <li>switched examples to use .woff files
   1.156 +
   1.157 +   <li>minor editorial cleanups
   1.158    </ul>
   1.159  
   1.160    <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

mercurial