discontinued / server · Files

index.html 200 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183 2184 2185 2186 2187 2188 2189 2190 2191 2192 2193 2194 2195 2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245 2246 2247 2248 2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260 2261 2262 2263 2264 2265 2266 2267 2268 2269 2270 2271 2272 2273 2274 2275 2276 2277 2278 2279 2280 2281 2282 2283 2284 2285 2286 2287 2288 2289 2290 2291 2292 2293 2294 2295 2296 2297 2298 2299 2300 2301 2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335 2336 2337 2338 2339 2340 2341 2342 2343 2344 2345 2346 2347 2348 2349 2350 2351 2352 2353 2354 2355 2356 2357 2358 2359 2360 2361 2362 2363 2364 2365 2366 2367 2368 2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 2399 2400 2401 2402 2403 2404 2405 2406 2407 2408 2409 2410 2411 2412 2413 2414 2415 2416 2417 2418 2419 2420 2421 2422 2423 2424 2425 2426 2427 2428 2429 2430 2431 2432 2433 2434 2435 2436 2437 2438 2439 2440 2441 2442 2443 2444 2445 2446 2447 2448 2449 2450 2451 2452 2453 2454 2455 2456 2457 2458 2459 2460 2461 2462 2463 2464 2465 2466 2467 2468 2469 2470 2471 2472 2473 2474 2475 2476 2477 2478 2479 2480 2481 2482 2483 2484 2485 2486 2487 2488 2489 2490 2491 2492 2493 2494 2495 2496 2497 2498 2499 2500 2501 2502 2503 2504 2505 2506 2507 2508 2509 2510 2511 2512 2513 2514 2515 2516 2517 2518 2519 2520 2521 2522 2523 2524 2525 2526 2527 2528 2529 2530 2531 2532 2533 2534 2535 2536 2537 2538 2539 2540 2541 2542 2543 2544 2545 2546 2547 2548 2549 2550 2551 2552 2553 2554 2555 2556 2557 2558 2559 2560 2561 2562 2563 2564 2565 2566 2567 2568 2569 2570 2571 2572 2573 2574 2575 2576 2577 2578 2579 2580 2581 2582 2583 2584 2585 2586 2587 2588 2589 2590 2591 2592 2593 2594 2595 2596 2597 2598 2599 2600 2601 2602 2603 2604 2605 2606 2607 2608 2609 2610 2611 2612 2613 2614 2615 2616 2617 2618 2619 2620 2621 2622 2623 2624 2625 2626 2627 2628 2629 2630 2631 2632 2633 2634 2635 2636 2637 2638 2639 2640 2641 2642 2643 2644 2645 2646 2647 2648 2649 2650 2651 2652 2653 2654 2655 2656 2657 2658 2659 2660 2661 2662 2663 2664 2665 2666 2667 2668 2669 2670 2671 2672 2673 2674 2675 2676 2677 2678 2679 2680 2681 2682 2683 2684 2685 2686 2687 2688 2689 2690 2691 2692 2693 2694 2695 2696 2697 2698 2699 2700 2701 2702 2703 2704 2705 2706 2707 2708 2709 2710 2711 2712 2713 2714 2715 2716 2717 2718 2719 2720 2721 2722 2723 2724 2725 2726 2727 2728 2729 2730 2731 2732 2733 2734 2735 2736 2737 2738 2739 2740 2741 2742 2743 2744 2745 2746 2747 2748 2749 2750 2751 2752 2753 2754 2755 2756 2757 2758 2759 2760 2761 2762 2763 2764 2765 2766 2767 2768 2769 2770 2771 2772 2773 2774 2775 2776 2777 2778 2779 2780 2781 2782 2783 2784 2785 2786 2787 2788 2789 2790 2791 2792 2793 2794 2795 2796 2797 2798 2799 2800 2801 2802 2803 2804 2805 2806 2807 2808 2809 2810 2811 2812 2813 2814 2815 2816 2817 2818 2819 2820 2821 2822 2823 2824 2825 2826 2827 2828 2829 2830 2831 2832 2833 2834 2835 2836 2837 2838 2839 2840 2841 2842 2843 2844 2845 2846 2847 2848 2849 2850 2851 2852 2853 2854 2855 2856 2857 2858 2859 2860 2861 2862 2863 2864 2865 2866 2867 2868 2869 2870 2871 2872 2873 2874 2875 2876 2877 2878 2879 2880 2881 2882 2883 2884 2885 2886 2887 2888 2889 2890 2891 2892 2893 2894 2895 2896 2897 2898 2899 2900 2901 2902 2903 2904 2905 2906 2907 2908 2909 2910 2911 2912 2913 2914 2915 2916 2917 2918 2919 2920 2921 2922 2923 2924 2925 2926 2927 2928 2929 2930 2931 2932 2933 2934 2935 2936 2937 2938 2939 2940 2941 2942 2943 2944 2945 2946 2947 2948 2949 2950 2951 2952 2953 2954 2955 2956 2957 2958 2959 2960 2961 2962 2963 2964 2965 2966 2967 2968 2969 2970 2971 2972 2973 2974 2975 2976 2977 2978 2979 2980 2981 2982 2983 2984 2985 2986 2987 2988 2989 2990 2991 2992 2993 2994 2995 2996 2997 2998 2999 3000 3001 3002 3003 3004 3005 3006 3007 3008 3009 3010 3011 3012 3013 3014 3015 3016 3017 3018 3019 3020 3021 3022 3023 3024 3025 3026 3027 3028 3029 3030 3031 3032 3033 3034 3035 3036 3037 3038 3039 3040 3041 3042 3043 3044 3045 3046 3047 3048 3049 3050 3051 3052 3053 3054 3055 3056 3057 3058 3059 3060 3061 3062 3063 3064 3065 3066 3067 3068 3069 3070 3071 3072 3073 3074 3075 3076 3077 3078 3079 3080 3081 3082 3083 3084 3085 3086 3087 3088 3089 3090 3091 3092 3093 3094 3095 3096 3097 3098 3099 3100 3101 3102 3103 3104 3105 3106 3107 3108 3109 3110 3111 3112 3113 3114 3115 3116 3117 3118 3119 3120 3121 3122 3123 3124 3125 3126 3127 3128 3129 3130 3131 3132 3133 3134 3135 3136 3137 3138 3139 3140 3141 3142 3143 3144 3145 3146 3147 3148 3149 3150 3151 3152 3153 3154 3155 3156 3157 3158 3159 3160 3161 3162 3163 3164 3165 3166 3167 3168 3169 3170 3171 3172 3173 3174 3175 3176 3177 3178 3179 3180 3181 3182 3183 3184 3185 3186 3187 3188 3189 3190 3191 3192 3193 3194 3195 3196 3197 3198 3199 3200 3201 3202 3203 3204 3205 3206 3207 3208 3209 3210 3211 3212 3213 3214 3215 3216 3217 3218 3219 3220 3221 3222 3223 3224 3225 3226 3227 3228 3229 3230 3231 3232 3233 3234 3235 3236 3237 3238 3239 3240 3241 3242 3243 3244 3245 3246 3247 3248 3249 3250 3251 3252 3253 3254 3255 3256 3257 3258 3259 3260 3261 3262 3263 3264 3265 3266 3267 3268 3269 3270 3271 3272 3273 3274 3275 3276 3277 3278 3279 3280 3281 3282 3283 3284 3285 3286 3287 3288 3289 3290 3291 3292 3293 3294 3295 3296 3297 3298 3299 3300 3301 3302 3303 3304 3305 3306 3307 3308 3309 3310 3311 3312 3313 3314 3315 3316 3317 3318 3319 3320 3321 3322 3323 3324 3325 3326 3327 3328 3329 3330 3331 3332 3333 3334 3335 3336 3337 3338 3339 3340 3341 3342 3343 3344 3345 3346 3347 3348 3349 3350 3351 3352 3353 3354 3355 3356 3357 3358 3359 3360 3361 3362 3363 3364 3365 3366 3367 3368 3369 3370 3371 3372 3373 3374 3375 3376 3377 3378 3379 3380 3381 3382 3383 3384 3385 3386 3387 3388 3389 3390 3391 3392 3393 3394 3395 3396 3397 3398 3399 3400 3401 3402 3403 3404 3405 3406 3407 3408 3409 3410 3411 3412 3413 3414 3415 3416 3417 3418 3419 3420 3421 3422 3423 3424 3425 3426 3427 3428 3429 3430 3431 3432 3433 3434 3435 3436 3437 3438 3439 3440 3441 3442 3443 3444 3445 3446 3447 3448 3449 3450 3451 3452 3453 3454 3455 3456 3457 3458 3459 3460 3461 3462 3463 3464 3465 3466 3467 3468 3469 3470 3471 3472 3473 3474 3475 3476 3477 3478 3479 3480 3481 3482 3483 3484 3485 3486 3487 3488 3489 3490 3491 3492 3493 3494 3495 3496 3497 3498 3499 3500 3501 3502 3503 3504 3505 3506 3507 3508 3509 3510 3511 3512 3513 3514 3515 3516 3517 3518 3519 3520 3521 3522 3523 3524 3525 3526 3527 3528 3529 3530 3531 3532 3533 3534 3535 3536 3537 3538 3539 3540 3541 3542 3543 3544 3545 3546 3547 3548 3549 3550 3551 3552 3553 3554 3555 3556 3557 3558 3559 3560 3561 3562 3563 3564 3565 3566 3567 3568 3569 3570 3571 3572 3573 3574 3575 3576 3577 3578 3579 3580 3581 3582 3583 3584 3585 3586 3587 3588 3589 3590 3591 3592 3593 3594 3595 3596 3597 3598 3599 3600 3601 3602 3603 3604 3605 3606 3607 3608 3609 3610 3611 3612 3613 3614 3615 3616 3617 3618 3619 3620 3621 3622 3623 3624 3625 3626 3627 3628 3629 3630 3631 3632 3633 3634 3635 3636 3637 3638 3639 3640 3641 3642 3643 3644 3645 3646 3647 3648 3649 3650 3651 3652 3653 3654 3655 3656 3657 3658 3659 3660 3661 3662 3663 3664 3665 3666 3667 3668 3669 3670 3671 3672 3673 3674 3675 3676 3677 3678 3679 3680 3681 3682 3683 3684 3685 3686 3687 3688 3689 3690 3691 3692 3693 3694 3695 3696 3697 3698 3699 3700 3701 3702 3703 3704 3705 3706 3707 3708 3709 3710 3711 3712 3713 3714 3715 3716 3717 3718 3719 3720 3721 3722 3723 3724 3725 3726 3727 3728 3729 3730 3731 3732 3733 3734 3735 3736 3737 3738 3739 3740 3741 3742 3743 3744 3745 3746 3747 3748 3749 3750 3751 3752 3753 3754 3755 3756 3757 3758 3759 3760 3761 3762 3763 3764 3765 3766 3767 3768 3769 3770 3771 3772 3773 3774 3775 3776 3777 3778 3779 3780 3781 3782 3783 3784 3785 3786 3787 3788 3789 3790 3791 3792 3793 3794 3795 3796 3797 3798 3799 3800 3801 3802 3803 3804 3805 3806 3807 3808 3809 3810 3811 3812 3813 3814 3815 3816 3817 3818 3819 3820 3821 3822 3823 3824 3825 3826 3827 3828 3829 3830 3831 3832 3833 3834 3835 3836 3837 3838 3839 3840 3841 3842 3843 3844 3845 3846 3847 3848 3849 3850 3851 3852 3853 3854 3855 3856 3857 3858 3859 3860 3861 3862 3863 3864 3865 3866 3867 3868 3869 3870 3871 3872 3873 3874 3875 3876 3877 3878 3879 3880 3881 3882 3883 3884 3885 3886 3887 3888 3889 3890 3891 3892 3893 3894 3895 3896 3897 3898 3899 3900 3901 3902 3903 3904 3905 3906 3907 3908 3909 3910 3911 3912 3913 3914 3915 3916 3917 3918 3919 3920 3921 3922 3923 3924 3925 3926 3927 3928 3929 3930 3931 3932 3933 3934 3935 3936 3937 3938 3939 3940 3941 3942 3943 3944 3945 3946 3947 3948 3949 3950 3951 3952 3953 3954 3955 3956 3957 3958 3959 3960 3961 3962 3963 3964 3965 3966 3967 3968 3969 3970 3971 3972 3973 3974 3975 3976 3977 3978 3979 3980 3981 3982 3983 3984 3985 3986 3987 3988 3989 3990 3991 3992 3993 3994 3995 3996 3997 3998 3999 4000 4001 4002 4003 4004 4005 4006 4007 4008 4009 4010 4011 4012 4013 4014 4015 4016 4017 4018 4019 4020 4021 4022 4023 4024 4025 4026 4027 4028 4029 4030 4031 4032 4033 4034 4035 4036 4037 4038 4039 4040 4041 4042 4043 4044 4045 4046 4047 4048 4049 4050 4051 4052 4053 4054 4055 4056 4057 4058 4059 4060 4061 4062 4063 4064 4065 4066 4067 4068 4069 4070 4071 4072 4073 4074 4075 4076 4077 4078 4079 4080 4081 4082 4083 4084 4085 4086 4087 4088 4089 4090 4091 4092 4093 4094 4095 4096 4097 4098 4099 4100 4101 4102 4103 4104 4105 4106 4107 4108 4109 4110 4111 4112 4113 4114 4115 4116 4117 4118 4119 4120 4121 4122 4123 4124 4125 4126 4127 4128 4129 4130 4131 4132 4133 4134 4135 4136 4137 4138 4139 4140 4141 4142 4143 4144 4145 4146 4147 4148 4149 4150 4151 4152 4153 4154 4155 4156 4157 4158 4159 4160 4161 4162 4163 4164 4165 4166 4167 4168 4169 4170 4171 4172 4173 4174 4175 4176 4177 4178 4179 4180 4181 4182 4183 4184 4185 4186 4187 4188 4189 4190 4191 4192 4193 4194 4195 4196 4197 4198 4199 4200 4201 4202 4203 4204 4205 4206 4207 4208 4209 4210 4211 4212 4213 4214 4215 4216 4217 4218 4219 4220 4221 4222 4223 4224 4225 4226 4227 4228 4229 4230 4231 4232 4233 4234 4235 4236 4237 4238 4239 4240 4241 4242 4243 4244 4245 4246 4247 4248 4249 4250 4251 4252 4253 4254 4255 4256 4257 4258 4259 4260 4261 4262 4263 4264 4265 4266 4267 4268 4269 4270 4271 4272 4273 4274 4275 4276 4277 4278 4279 4280 4281 4282 4283 4284 4285 4286 4287 4288 4289 4290 4291 4292 4293 4294 4295 4296 4297 4298 4299 4300 4301 4302 4303 4304 4305 4306 4307 4308 4309 4310 4311 4312 4313 4314 4315 4316 4317 4318 4319 4320 4321 4322 4323 4324 4325 4326 4327 4328 4329 4330 4331 4332 4333 4334 4335 4336 4337 4338 4339 4340 4341 4342 4343 4344 4345 4346 4347 4348 4349 4350 4351 4352 4353 4354 4355 4356 4357 4358 4359 4360 4361 4362 4363 4364 4365 4366 4367 4368 4369 4370 4371 4372 4373 4374 4375 4376 4377 4378 4379 4380 4381 4382 4383 4384 4385 4386 4387 4388 4389 4390 4391 4392 4393 4394 4395 4396 4397 4398 4399 4400 4401 4402 4403 4404 4405 4406 4407 4408 4409 4410 4411 4412 4413 4414 4415 4416 4417 4418 4419 4420 4421 4422 4423 4424 4425 4426 4427 4428 4429 4430 4431 4432 4433 4434 4435 4436 4437 4438 4439 4440 4441 4442 4443 4444 4445 4446 4447 4448 4449 4450 4451 4452 4453 4454 4455 4456 4457 4458 4459 4460 4461 4462 4463 4464 4465 4466 4467 4468 4469 4470 4471 4472 4473 4474 4475 4476 4477 4478 4479 4480 4481 4482 4483 4484 4485 4486 4487 4488 4489 4490 4491 4492 4493 4494 4495 4496 4497 4498 4499 4500 4501 4502 4503 4504 4505 4506 4507 4508 4509 4510 4511 4512 4513 4514 4515 4516 4517 4518 4519 4520 4521 4522 4523 4524 4525 4526 4527 4528 4529 4530 4531 4532 4533 4534 4535 4536 4537 4538 4539 4540 4541 4542 4543 4544 4545 4546 4547 4548 4549 4550 4551 4552 4553 4554 4555 4556 4557 4558 4559 4560 4561 4562 4563 4564 4565 4566 4567 4568 4569 4570 4571 4572 4573 4574 4575 4576 4577 4578 4579 4580 4581 4582 4583 4584 4585 4586 4587 4588 4589 4590 4591 4592 4593 4594 4595 4596 4597 4598 4599 4600 4601 4602 4603 4604 4605 4606 4607 4608 4609 4610 4611 4612 4613 4614 4615 4616 4617 4618 4619 4620 4621 4622 4623 4624 4625 4626 4627 4628 4629 4630 4631 4632 4633 4634 4635 4636 4637 4638 4639 4640 4641 4642 4643 4644 4645 4646 4647 4648 4649 4650 4651 4652 4653 4654 4655 4656 4657 4658 4659 4660 4661 4662 4663 4664 4665 4666 4667 4668 4669 4670 4671 4672 4673 4674 4675 4676 4677 4678 4679 4680 4681 4682 4683 4684 4685 4686 4687 4688 4689 4690 4691 4692 4693 4694 4695 4696 4697 4698 4699 4700 4701 4702 4703 4704 4705 4706 4707 4708 4709 4710 4711 4712 4713 4714 4715 4716 4717 4718 4719 4720 4721 4722 4723 4724 4725 4726 4727 4728 4729 4730 4731 4732 4733 4734 4735 4736 4737 4738 4739 4740 4741 4742 4743 4744 4745 4746 4747 4748 4749 4750 4751 4752 4753 4754 4755 4756 4757 4758 4759 4760 4761 4762 4763 4764 4765 4766 4767 4768 4769 4770 4771 4772 4773 4774 4775 4776 4777 4778 4779 4780 4781 4782 4783 4784 4785 4786 4787 4788 4789 4790 4791 4792 4793 4794 4795 4796 4797 4798 4799 4800 4801 4802 4803 4804 4805 4806 4807 4808 4809 4810 4811 4812 4813 4814 4815 4816 4817 4818 4819 4820 4821 4822 4823 4824 4825 4826 4827 4828 4829 4830 4831 4832 4833 4834 4835 4836 4837 4838 4839 4840 4841 4842 4843 4844 4845 4846 4847 4848 4849 4850 4851 4852 4853 4854 4855 4856 4857 4858 4859 4860 4861 4862 4863 4864 4865 4866 4867 4868 4869 4870 4871 4872 4873 4874 4875 4876 4877 4878 4879 4880 4881 4882 4883 4884 4885 4886 4887 4888 4889 4890 4891 4892 4893 4894 4895 4896 4897 4898 4899 4900 4901 4902 4903 4904 4905 4906 4907 4908 4909 4910 4911 4912 4913 4914 4915 4916 4917 4918 4919 4920 4921 4922 4923 4924 4925 4926 4927 4928 4929 4930 4931 4932 4933 4934 4935 4936 4937 4938 4939 4940 4941 4942 4943 4944 4945 4946 4947 4948 4949 4950 4951 4952 4953 4954 4955 4956 4957 4958 4959 4960 4961 4962 4963 4964 4965 4966 4967 4968 4969 4970 4971 4972 4973 4974 4975 4976 4977 4978 4979 4980 4981 4982 4983 4984 4985 4986 4987 4988 4989 4990 4991 4992 4993 4994 4995 4996 4997 4998 4999 5000 5001 5002 5003 5004 5005 5006 5007 5008 5009 5010 5011 5012 5013 5014 5015 5016 5017 5018 5019 5020 5021 5022 5023 5024 5025 5026 5027 5028 5029 5030 5031 5032 5033 5034 5035 5036 5037 5038 5039 5040 5041 5042 5043 5044 5045 5046 5047 5048 5049 5050 5051 5052 5053 5054 5055 5056 5057 5058 5059 5060 5061 5062 5063 5064 5065 5066 5067 5068 5069 5070 5071 5072 5073 5074 5075 5076 5077 5078 5079 5080 5081 5082 5083 5084 5085 5086 5087 5088 5089 5090 5091 5092 5093 5094 5095 5096 5097 5098 5099 5100 5101 5102 5103 5104 5105 5106 5107 5108 5109 5110 5111 5112 5113 5114 5115 5116 5117 5118 5119 5120 5121 5122 5123 5124 5125 5126 5127 5128 5129 5130 5131 5132 5133 5134 5135 5136 5137 5138 5139 5140 5141 5142 5143 5144 5145 5146 5147 5148 5149 5150 5151 5152 5153 5154 5155 5156 5157 5158 5159 5160 5161 5162 5163 5164 5165 5166 5167 5168 5169 5170 5171 5172 5173 5174 5175 5176 5177 5178 5179 5180 5181 5182 5183 5184 5185 5186 5187 5188 5189 5190 5191 5192 5193 5194 5195 5196 5197 5198 5199 5200 5201 5202 5203 5204 5205 5206 5207 5208 5209 5210 5211 5212 5213 5214 5215 5216 5217 5218 5219 5220 5221 5222 5223 5224 5225 5226 5227 5228 5229 5230 5231 5232 5233 5234 5235 5236 5237 5238 5239 5240 5241 5242 5243 5244 5245 5246 5247 5248 5249 5250 5251 5252 5253 5254 5255 5256 5257 5258 5259 5260 5261 5262 5263 5264 5265 5266 5267 5268 5269 5270 5271 5272 5273 5274 5275 5276 5277 5278 5279 5280 5281 5282 5283 5284 5285 5286 5287 5288 5289 5290 5291 5292 5293 5294 5295 5296 5297 5298 5299 5300 5301 5302 5303 5304 5305 5306 5307 5308 5309 5310 5311 5312 5313 5314 5315 5316 5317 5318 5319 5320 5321 5322 5323 5324 5325 5326 5327 5328 5329 5330 5331 5332 5333 5334 5335 5336 5337 5338 5339 5340 5341 5342 5343 5344 5345 5346 5347 5348 5349 5350 5351 5352 5353 5354 5355 5356 5357 5358 5359 5360 5361 5362 5363 5364 5365 5366 5367 5368 5369 5370 5371 5372 5373 5374 5375 5376 5377 5378 5379 5380 5381 5382 5383 5384 5385 5386 5387 5388 5389 5390 5391 5392 5393 5394 5395 5396 5397 5398 5399 5400 5401 5402 5403 5404 5405 5406 5407 5408 5409 5410 5411 5412 5413 5414 5415 5416 5417 5418 5419 5420 5421 5422 5423 5424 5425 5426 5427 5428 5429 5430 5431 5432 5433 5434 5435 5436 5437 5438 5439 5440 5441 5442 5443 5444 5445 5446 5447 5448 5449 5450 5451 5452 5453 5454 5455 5456 5457 5458 5459 5460 5461 5462 5463 5464 5465 5466 5467 5468 5469 5470 5471 5472 5473 5474 5475 5476 5477 5478 5479 5480 5481 5482 5483 5484 5485 5486 5487 5488 5489 5490 5491 5492 5493 5494 5495 5496 5497 5498 5499 5500 5501 5502 5503 5504 5505 5506 5507 5508 5509 5510 5511 5512 5513 5514 5515 5516 5517 5518 5519 5520 5521 5522 5523 5524 5525 5526 5527 5528 5529 5530 5531 5532 5533 5534 5535 5536 5537 5538 5539 5540 5541 5542 5543 5544 5545 5546 5547 5548 5549 5550 5551 5552 5553 5554 5555 5556 5557 5558 5559 5560 5561 5562 5563 5564 5565 5566 5567 5568 5569 5570 5571 5572 5573 5574 5575 5576 5577 5578 5579 5580 5581 5582 5583 5584 5585 5586 5587 5588 5589 5590 5591 5592 5593 5594 5595 5596 5597 5598 5599 5600 5601 5602 5603 5604 5605 5606 5607 5608 5609 5610 5611 5612 5613 5614 5615 5616 5617 5618 5619 5620 5621 5622 5623 5624 5625 5626 5627 5628 5629 5630 5631 5632 5633 5634 5635 5636 5637 5638 5639 5640 5641 5642 5643 5644 5645 5646 5647 5648 5649 5650 5651 5652 5653 5654 5655 5656 5657 5658 5659 5660 5661 5662 5663 5664 5665 5666 5667 5668 5669 5670 5671 5672 5673 5674 5675 5676 5677 5678 5679 5680 5681 5682 5683 5684 5685 5686 5687 5688 5689 5690 5691 5692 5693 5694 5695 5696 5697 5698 5699 5700 5701 5702 5703 5704 5705 5706 5707 5708 5709 5710 5711 5712 5713 5714 5715 5716 5717 5718 5719 5720 5721 5722 5723 5724 5725 5726 5727 5728 5729 5730 5731 5732 5733 5734 5735 5736 5737 5738 5739 5740 5741 5742 5743 5744 5745 5746 5747 5748 5749 5750 5751 5752 5753 5754 5755 5756 5757 5758 5759 5760 5761 5762 5763 5764 5765 5766 5767 5768 5769 5770 5771 5772 5773 5774 5775 5776 5777 5778 5779 5780 5781 5782 5783 5784 5785 5786 5787 5788 5789 5790 5791 5792 5793 5794 5795 5796 5797 5798 5799 5800 5801 5802 5803 5804 5805 5806 5807 5808 5809 5810 5811 5812 5813 5814 5815 5816 5817 5818 5819 5820 5821 5822 5823 5824 5825 5826 5827 5828 5829 5830 5831 5832 5833 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang=en>
 <head><meta content="text/html;charset=utf-8" http-equiv=Content-Type>

  <title>CSS Fonts Module Level 3</title>
  <!--
      FIXME when publishing: copy the current default.css and link to
      "default.css" rather than "../default.css"
   -->
  <link href="default.css" rel=stylesheet type="text/css">

  <style type="text/css">
  
  body {
    padding: 2em 70px 2em 70px;
  }
  
  p + p, p.mtb {
    margin-top: 0.8em;
    text-indent: 0px;
  }
  
  #fontformats td, #fontformats th {
    padding-right: 2em;
    text-align: left;
  }
  
  dd {
    margin-bottom: 1em;
  }
  
  pre {
  	font-size: 100%;
  }
  
  #authors dd {
    margin-bottom: 0;
  }
  
  #fontstylematchingalg {
    list-style-type: lower-alpha;
  }
  
  #fontmatchingalg ul, #fontmatchingalg ol {
    margin-top: 0.8em;
  }
  
  #fontmatchingalg li + li {
    margin-top: 0.8em;
  }
  
  div.example {
    padding: 1em;
    margin-top: 1em;
  }

  div.example + div.example {
    margin-top: 2em;
  }
  
  div.figure {
    page-break-inside: avoid;
  }

  .data {
    margin: 1em auto;
    border-collapse: collapse;
  }

  .data caption {
    width: 100%;
    text-align: center;
  }

  .data td, .data th {
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: center;
  }

  .data thead th:first-child {
    text-align: right;
  }

  .data tbody th:first-child {
    text-align: left;
    padding-left: 0.5em;
  }

  pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
  
  div.featex { 
    width: 700px;
  }
  
  div.featex img {
    margin: auto;
    display: block;
  }
  
  </style>
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
  type="text/css">

 <body>
  <div class=head> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

   <h1>CSS Fonts Module Level 3</h1>

   <h2 class="no-num no-toc" id=w3c-working>W3C Working Draft 4 October 2011</h2>

   <dl id=authors>
    <dt>This version:</dt>
    <!-- <dd><a href="http://dev.w3.org/csswg/css3-fonts/">http://dev.w3.org/csswg/css3-fonts/</a> -->

    <dd><a
     href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/">http://www.w3.org/TR/2011/WD-css3-fonts-20111004/</a>
     

    <dt>Latest version:

    <dd><a
     href="http://www.w3.org/TR/css3-fonts/">http://www.w3.org/TR/css3-fonts/</a>

    <dt>Latest editor's draft:

    <dd><a
     href="http://dev.w3.org/csswg/css3-fonts/">http://dev.w3.org/csswg/css3-fonts/</a>

    <dt>Previous version (CSS3 Fonts):

    <dd><a
     href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324/">http://www.w3.org/TR/2011/WD-css3-fonts-20110324/</a>

    <dd><a
     href="http://www.w3.org/TR/2009/WD-css3-fonts-20090618/">http://www.w3.org/TR/2009/WD-css3-fonts-20090618/</a>

    <dd><a
     href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/">http://www.w3.org/TR/2002/WD-css3-fonts-20020802/</a>

    <dt>Previous version (CSS3 Web Fonts):

    <dd><a
     href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/">http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/</a>

    <dt>Editor:

    <dd><a href="mailto:jdaggett@mozilla.com">John Daggett (Mozilla)</a>
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> © 2011 <a href="http://www.w3.org/"><acronym
    title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
    href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
    of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
    title="European Research Consortium for Informatics and
    Mathematics">ERCIM</acronym></a>, <a
    href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <p>This CSS3 module describes how font properties are specified and how
   font resources are loaded dynamically. The contents of this specification
   are a consolidation of content previously divided into <a
   href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/">CSS3 Fonts</a>
   and <a href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/">CSS3
   Web Fonts</a> modules.

  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  <!--begin-status-->

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index at http://www.w3.org/TR/.</a></em>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
   <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
   for discussion of this specification. When sending e-mail, please put the
   text “css3-fonts” in the subject, preferably like this:
   “[<!---->css3-fonts<!---->] <em>…summary of comment…</em>”

  <p>This document was produced by the <a
   href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
   the <a href="http://www.w3.org/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   2004 W3C Patent Policy</a>. W3C maintains a <a
   href="http://www.w3.org/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   6 of the W3C Patent Policy</a>.</p>
  <!--end-status-->

  <h3 class="no-num no-toc" id=atrisk>Features at risk</h3>

  <p>The following features are at risk and may be removed when exiting CR:

  <ul>
   <li>Description of the same origin restriction for fonts, if replaced by
    similar mechanism.
  </ul>

  <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>

   <li><a href="#typography-background"><span class=secno>2 </span>Typography
    Background</a>

   <li><a href="#basic-font-props"><span class=secno>3 </span>Basic font
    properties</a>
    <ul class=toc>
     <li><a href="#font-family-prop"><span class=secno>3.1 </span>Font
      family: the font-family property</a>
      <ul class=toc>
       <li><a href="#generic-font-families"><span class=secno>3.1.1
        </span>Generic font families</a>
      </ul>

     <li><a href="#font-weight-prop"><span class=secno>3.2 </span>Font
      weight: the font-weight property</a>

     <li><a href="#font-stretch-prop"><span class=secno>3.3 </span>Font
      width: the font-stretch property</a>

     <li><a href="#font-style-prop"><span class=secno>3.4 </span>Font style:
      the font-style property</a>

     <li><a href="#font-size-prop"><span class=secno>3.5 </span>Font size:
      the font-size property</a>

     <li><a href="#font-size-adjust-prop"><span class=secno>3.6
      </span>Relative sizing: the font-size-adjust property</a>

     <li><a href="#font-prop"><span class=secno>3.7 </span>Shorthand font
      property: the font property</a>

     <li><a href="#font-synthesis-prop"><span class=secno>3.8
      </span>Controlling synthetic faces: the font-synthesis property</a>
    </ul>

   <li><a href="#font-resources"><span class=secno>4 </span>Font
    resources</a>
    <ul class=toc>
     <li><a href="#font-face-rule"><span class=secno>4.1 </span>The
      @font-face rule</a>

     <li><a href="#font-family-desc"><span class=secno>4.2 </span>Font
      family: the font-family descriptor</a>

     <li><a href="#src-desc"><span class=secno>4.3 </span>Font reference: the
      src descriptor</a>

     <li><a href="#font-prop-desc"><span class=secno>4.4 </span>Font property
      descriptors: the font-style, font-weight, font-stretch descriptors</a>

     <li><a href="#unicode-range-desc"><span class=secno>4.5 </span>Character
      range: the unicode-range descriptor</a>

     <li><a href="#font-rend-desc"><span class=secno>4.6 </span>Font
      features: the font-variant and font-feature-settings descriptors</a>

     <li><a href="#font-face-loading"><span class=secno>4.7 </span>Font
      loading guidelines</a>

     <li><a href="#same-origin-restriction"><span class=secno>4.8
      </span>Same-origin restriction for fonts</a>
      <ul class=toc>
       <li><a href="#default-same-origin-restriction"><span class=secno>4.8.1
        </span>Default same-origin restriction</a>

       <li><a href="#allowing-cross-origin-font-loading"><span
        class=secno>4.8.2 </span>Allowing cross-origin font loading</a>
      </ul>
    </ul>

   <li><a href="#font-matching-algorithm"><span class=secno>5 </span>Font
    matching algorithm</a>
    <ul class=toc>
     <li><a href="#font-style-matching"><span class=secno>5.1 </span>Matching
      font styles</a>

     <li><a href="#char-handling-issues"><span class=secno>5.2
      </span>Character handling issues</a>

     <li><a href="#font-matching-changes"><span class=secno>5.3 </span>Font
      matching changes since CSS 2.1</a>
    </ul>

   <li><a href="#font-rend-props"><span class=secno>6 </span>Font feature
    properties</a>
    <ul class=toc>
     <li><a href="#glyph-selection-positioning"><span class=secno>6.1
      </span>Glyph selection and positioning</a>

     <li><a href="#language-specific-support"><span class=secno>6.2
      </span>Language-specific display</a>

     <li><a href="#font-kerning-prop"><span class=secno>6.3 </span>Kerning:
      the font-kerning property</a>

     <li><a href="#font-variant-position-prop"><span class=secno>6.4
      </span>Subscript, superscript and ordinal forms: the
      font-variant-position property</a>

     <li><a href="#font-variant-ligatures-prop"><span class=secno>6.5
      </span>Ligatures: the font-variant-ligatures property</a>

     <li><a href="#font-variant-caps-prop"><span class=secno>6.6
      </span>Capitalization: the font-variant-caps property</a>

     <li><a href="#font-variant-numeric-prop"><span class=secno>6.7
      </span>Numerical formatting: the font-variant-numeric property</a>

     <li><a href="#font-variant-alternates-prop"><span class=secno>6.8
      </span>Alternates and swashes: the font-variant-alternates property</a>
      

     <li><a href="#font-feature-values"><span class=secno>6.9 </span>Defining
      font specific alternates: the @font-feature-values rule</a>

     <li><a href="#font-variant-east-asian-prop"><span class=secno>6.10
      </span>East Asian text rendering: the font-variant-east-asian
      property</a>

     <li><a href="#font-variant-prop"><span class=secno>6.11 </span>Overall
      shorthand for font rendering: the font-variant property</a>

     <li><a href="#font-feature-settings-prop"><span class=secno>6.12
      </span>Low-level font feature settings control: the
      font-feature-settings property</a>

     <li><a href="#font-language-override-prop"><span class=secno>6.13
      </span>Font language override: the font-language-override property</a>
    </ul>

   <li><a href="#rendering-considerations"><span class=secno>7
    </span>Resolving font feature settings </a>

   <li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping
    platform font properties to CSS properties</a>

   <li class=no-num><a href="#font-licensing">Appendix B: Font licensing
    issues</a>

   <li class=no-num><a href="#font-feature-values-DOM">Appendix C: DOM
    Interfaces</a>

   <li class=no-num><a href="#ch-ch-ch-changes">Changes</a>
    <ul class=toc>
     <li class=no-num><a href="#recent-changes"> Changes from the March 2011
      CSS3 Fonts Working Draft</a>
    </ul>

   <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

   <li class=no-num><a href="#references">References</a>
    <ul class=toc>
     <li class=no-num><a href="#normative-references">Normative
      References</a>

     <li class=no-num><a href="#other-references">Other References</a>
    </ul>

   <li class=no-num><a href="#index">Index</a>

   <li class=no-num><a href="#property-index">Property index</a>
  </ul>
  <!--end-toc-->

  <h2 id=introduction><span class=secno>1 </span>Introduction</h2>

  <p>A font provides a resource containing the visual representation of
   characters. At the simplest level it contains information that maps
   character codes to shapes (called glyphs) that represent these characters.
   Fonts sharing a common design style are commonly grouped into font
   families classified by a set of standard font properties. Within a family,
   the shape displayed for a given character can vary by stroke weight, slant
   or relative width, among others. A given font face is described by a
   unique combination of these properties. For a given range of text, CSS
   font properties are used to select a font family and a specific font face
   within that family to be used when rendering that text. As a simple
   example, to use the bold form of Helvetica one could use:

  <pre>body { 
    font-family: Helvetica; 
    font-weight: bold; 
}</pre>

  <p>Font resources may be local, installed on the system on which a user
   agent is running, or downloadable. For local font resources descriptive
   information can be obtained directly from the font resource. For
   downloadable font resources (sometimes referred to as web fonts), the
   descriptive information is included with the reference to the font
   resource.

  <p>Families of fonts typically don't contain a single face for each
   possible variation of font properties. The CSS font selection mechanism
   describes how to match a given set of CSS font properties to a given font
   face.

  <h2 id=typography-background><span class=secno>2 </span>Typography
   Background</h2>
  <!-- 
 - Wide variation in character forms, glyphs
 - Use of diacritics adds complications to even "simple" alphabets
 - Examples from Czech, Slovak, African romanizations
 - Vietnamese stacking example
 - General use of ligatures
 - Required for languages such as Arabic
 - Problems with creating "universal fonts"
-->

  <p><em>This section is included as background for some of the problems and
   situations that are described in other sections. It should be viewed as
   informative only.</em>

  <p> Typographic traditions vary across the globe so there is no unique way
   to classify all fonts across languages and cultures. For even common Latin
   letters, wide variations are possible:

  <div class=figure><img alt="variations in glyphs for a single character"
   src=aaaaaa.png>
   <p class=caption>One character, many glyph variations
  </div>

  <p>Differences in the anatomy of letterforms is one way to distinguish
   fonts. For Latin fonts, flourishes at the ends of a character's main
   strokes, or serifs, can distinguish a font from those without. Similar
   comparisons exist in non-Latin fonts between fonts with tapered strokes
   and those using primarily uniform strokes:

  <div class=figure><img alt="serif vs. non-serifs" src=serifvssansserif.png>
   <p class=caption>Letterforms with and without serifs
  </div>

  <div class=figure><img alt="serif vs. non-serifs for japanese"
   src=minchovsgothic.png>
   <p class=caption>Similar groupings for Japanese typefaces
  </div>

  <p>Fonts contain letterforms and the data needed to map characters to these
   letterforms. Often this may be a simple one-to-one mapping but more
   complex mappings are also possible. The use of combining diacritic marks
   creates many variations for an underlying letterform:

  <div class=figure><img alt="diacritic marks" src=aaaaaa-diacritics.png>
   <p class=caption>Variations with diacritic marks
  </div>
  <!-- Include stacking diacritics?  Hmm, Vietnamese example? -->

  <p>A sequence of characters can be represented by a single glyph known as a
   ligature:

  <div class=figure><img alt="example of a fi ligature"
   src=final-ligature.png>
   <p class=caption>Ligature example
  </div>

  <p>Visual transformations based on textual context like this may be a
   stylistic option for European languages but are required to correctly
   render languages like Arabic; the lam and alef characters below
   <em>must</em> be combined when they exist in sequence:

  <div class=figure><img alt="lam alef ligature" src=lamaleflig.png>
   <p class=caption>Required Arabic ligature
  </div>

  <p>The relative complexity of these shaping transformations requires
   additional data within the font.

  <p>Sets of font faces with various stylistic variations are often grouped
   together into font families. In the simplest case a regular face is
   supplemented with bold and italic faces but much more extensive groupings
   are possible. Variations in the thickness of letterform strokes, or the
   weight, or the overall proportions of the letterform, or the width, are
   most common. In the example below, each letter uses a different font face
   within the Univers font family. The width used increases from top to
   bottom and the weight increases from left to right:

  <div class=figure><img alt="various width and weight variations within a
   single family" src=weightwidthvariations.png>
   <p class=caption>Weight and width variations within a single font family
  </div>

  <p>Creating fonts that support multiple scripts is a difficult task;
   designers need to understand the cultural traditions surrounding the use
   of type in different scripts and come up with letterforms that somehow
   share a common theme. Many languages often share a common script and each
   of these languages may have noticeable stylistic differences. The Arabic
   script is shared by Persian and Urdu and Cyrillic is used with many
   languages, not just Russian.

  <p>The character map of a font defines the mapping of characters to glyphs
   for that font. If a document contains characters not supported by the
   character maps of explicitly specified fonts, a user agent may use a
   system font fallback procedure to locate an appropriate font that does. If
   no appropriate font can be found, some form of "missing glyph" character
   will be rendered by the user agent. Fallback can occur because fonts are
   not explicitly specified or because authors fail to explicitly indicate
   the encoding used by a document.

  <p>Although the character map of a font maps a given character to a glyph
   for that character, modern font technologies such as OpenType and AAT
   (Apple Advanced Typography) provide a richer set of rules for performing
   this mapping. Fonts in these forms allow these features to be embedded in
   the font itself and controlled by applications. Common typographic
   features which can be specified this way include ligatures, swashes,
   contextual alternates, proportional and tabular figures, and automatic
   fractions, to list just a few. For a visual overview of OpenType features,
   see the <a href="#OPENTYPE-FONT-GUIDE"
   rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.</p>
  <!-- illustration of various font features -->
  <!-- common ligs, uncommon ligs, old-style figures, lining figures, prop/tabular figures,
automatic fractions, proportional/full-width Japanese, glyph variations over time,
stylistic alternates, swashes, small-caps -->

  <h2 id=basic-font-props><span class=secno>3 </span>Basic font properties</h2>

  <p>The particular font face used to render a character is determined by the
   font family and other font properties that apply to a given element. This
   structure allows settings to be varied independent of each other.</p>
  <!-- prop: font-family -->

  <h3 id=font-family-prop><span class=secno>3.1 </span>Font family: the <a
   href="#propdef-font-family">font-family</a> property</h3>

  <table class=propdef id=namefont-family>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-family>font-family</dfn>

    <tr>
     <td>Value:

     <td>[[ &lt;family-name> | &lt;generic-family> ] [, &lt;family-name> |
      &lt;generic-family>]* ] | inherit

    <tr>
     <td>Initial:

     <td>depends on user agent

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>This property specifies a prioritized list of font family names or
   generic family names. Unlike other CSS properties, component values are a
   comma-separated list indicating alternatives. A user agent iterates
   through the list of family names until it matches an available font that
   contains a glyph for the character to be rendered. This allows for
   differences in available fonts across platforms and for differences in the
   range of characters supported by individual fonts.

  <p>A font family name only specifies a name given to a set of font faces,
   it does not specify an individual face. Given the availability of the
   fonts below, Futura would match but Futura Medium would not:

  <div class=figure><img alt="family and face names"
   src=familyvsfacename.png>
   <p class=caption>Family and individual face names
  </div>

  <p>Consider the example below:

  <div class=example>
   <pre>body { 
    font-family: Helvetica, Verdana, sans-serif; 
}</pre>

   <p>If Helvetica is available it will be used when rendering. If neither
    Helvetica nor Verdana is present, then the user-agent-defined sans serif
    font will be used.</p>
  </div>

  <p>There are two types of font family names:

  <dl>
   <dt>&lt;family-name&gt;

   <dd>The name of a font family of choice such as Helvetica or Verdana in
    the previous example.

   <dt>&lt;generic-family&gt;

   <dd> The following generic family keywords are defined: ‘<code
    class=property><a href="#serif">serif</a></code>’, ‘<code
    class=property><a href="#sans-serif">sans-serif</a></code>’, ‘<code
    class=property><a href="#cursive">cursive</a></code>’, ‘<code
    class=property><a href="#fantasy">fantasy</a></code>’, and ‘<code
    class=property><a href="#monospace">monospace</a></code>’. These
    keywords can be used as a general fallback mechanism when an author's
    desired font choices are not available. As keywords, they must not be
    quoted. Authors are encouraged to append a generic font family as a last
    alternative for improved robustness.
  </dl>

  <p>Font family names must either be given quoted as <a
   href="//www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or unquoted
   as a sequence of one or more <a
   href="//www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a>
   This means most punctuation characters and digits at the start of each
   token must be escaped in unquoted font family names.

  <p>For example, the following declarations are invalid:

  <pre>
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;
</pre>

  <p>If a sequence of identifiers is given as a font family name, the
   computed value is the name converted to a string by joining all the
   identifiers in the sequence by single spaces.

  <p>To avoid mistakes in escaping, it is recommended to quote font family
   names that contain white space, digits, or punctuation characters other
   than hyphens:

  <pre>
body { font-family: "New Century Schoolbook", serif }

&lt;BODY STYLE="font-family: '21st Century', fantasy">
</pre>

  <p>Font family <em>names</em> that happen to be the same as a keyword value
   (‘<code class=property>inherit</code>’, ‘<code class=property><a
   href="#serif">serif</a></code>’, ‘<code class=property><a
   href="#sans-serif">sans-serif</a></code>’, ‘<code class=property><a
   href="#monospace">monospace</a></code>’, ‘<code class=property><a
   href="#fantasy">fantasy</a></code>’, and ‘<code class=property><a
   href="#cursive">cursive</a></code>’) must be quoted to prevent confusion
   with the keywords with the same names. The keywords ‘<code
   class=property>initial</code>’ and ‘<code
   class=property>default</code>’ are reserved for future use and must also
   be quoted when used as font names. UAs must not consider these keywords as
   matching the ‘<code class=css>&lt;family-name&gt;</code>’ type.

  <p>Some font formats allow fonts to carry multiple localizations of the
   family name. User agents must recognize and correctly match all of these
   names independent of the underlying platform localization, system API used
   or document encoding:

  <div class=figure><img alt="examples of localized family names"
   src=localizedfamilynames.png>
   <p class=caption>Localized family names
  </div>

  <h4 id=generic-font-families><span class=secno>3.1.1 </span>Generic font
   families</h4>

  <p>All five generic font families are defined to exist in all CSS
   implementations (they need not necessarily map to five distinct actual
   fonts). User agents should provide reasonable default choices for the
   generic font families, which express the characteristics of each family as
   well as possible within the limits allowed by the underlying technology.
   User agents are encouraged to allow users to select alternative choices
   for the generic fonts.

  <h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif,
   definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5>

  <p>Glyphs of serif fonts, as the term is used in CSS, have finishing
   strokes, flared or tapering ends, or have actual serifed endings
   (including slab serifs). Serif fonts are typically proportionately-spaced.
   They often display a greater variation between thick and thin strokes than
   fonts from the ‘<code class=property><a
   href="#sans-serif">sans-serif</a></code>’ generic font family. CSS uses
   the term ‘<code class=property><a href="#serif">serif</a></code>’ to
   apply to a font for any script, although other names may be more familiar
   for particular scripts, such as Mincho (Japanese), Sung, Song or Kai
   (Chinese), Batang (Korean). Any font that is so described may be used to
   represent the generic ‘<code class=property><a
   href="#serif">serif</a></code>’ family.

  <div class=figure><img alt="sample serif fonts" src=serifexamples.png>
   <p class=caption>Sample serif fonts
  </div>

  <h5 class="no-num no-toc"> <span class=index-def id=sans-serif0
   title="sans-serif, definition of"> <a name=sans-serif-def><dfn
   id=sans-serif>sans-serif</dfn></a></span></h5>

  <p>Glyphs in sans-serif fonts, as the term is used in CSS, have stroke
   endings that are plain -- without any flaring, cross stroke, or other
   ornamentation. Sans-serif fonts are typically proportionately-spaced. They
   often have little variation between thick and thin strokes, compared to
   fonts from the ‘<code class=property><a
   href="#serif">serif</a></code>’ family. CSS uses the term ‘<code
   class=property><a href="#sans-serif">sans-serif</a></code>’ to apply to
   a font for any script, although other names may be more familiar for
   particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim
   (Korean). Any font that is so described may be used to represent the
   generic ‘<code class=property><a
   href="#sans-serif">sans-serif</a></code>’ family.

  <div class=figure><img alt="sample sans-serif fonts"
   src=sansserifexamples.png>
   <p class=caption>Sample sans-serif fonts
  </div>

  <h5 class="no-num no-toc"> <span class=index-def id=cursive0
   title="cursive, definition of"> <a name=cursive-def><dfn
   id=cursive>cursive</dfn></a></span></h5>

  <p>Glyphs in cursive fonts generally have either joining strokes or other
   cursive characteristics beyond those of italic typefaces. The glyphs are
   partially or completely connected, and the result looks more like
   handwritten pen or brush writing than printed letterwork. Some scripts,
   such as Arabic, are almost always cursive. CSS uses the term ‘<code
   class=property><a href="#cursive">cursive</a></code>’ to apply to a font
   for any script, although other names such as Chancery, Brush, Swing and
   Script are also used in font names.

  <div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png>
   <p class=caption>Sample cursive fonts
  </div>

  <h5 class="no-num no-toc"> <span class=index-def id=fantasy0
   title="fantasy, definition of"> <a name=fantasy-def><dfn
   id=fantasy>fantasy</dfn></a></span></h5>

  <p>Fantasy fonts are primarily decorative fonts that contain playful
   representations of characters. These do not include Pi or Picture fonts
   which do not represent actual characters.

  <div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png>
   <p class=caption>Sample fantasy fonts
  </div>

  <h5 class="no-num no-toc"> <span class=index-def id=monospace0
   title="monospace, definition of"> <a name=monospace-def><dfn
   id=monospace>monospace</dfn></a></span></h5>

  <p>The sole criterion of a monospace font is that all glyphs have the same
   fixed width. This is often used to render samples of computer code.

  <div class=figure><img alt="sample monospace fonts"
   src=monospaceexamples.png>
   <p class=caption>Sample monospace fonts
  </div>
  <!-- prop: font-weight -->

  <h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a
   href="#propdef-font-weight">font-weight</a> property</h3>

  <table class=propdef id=namefont-weight>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-weight>font-weight</dfn>

    <tr>
     <td>Value:

     <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
      | 700 | 800 | 900 | inherit

    <tr>
     <td>Initial:

     <td>normal

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>see description
  </table>

  <p>The <a class=noxref href="#font-weight-prop"><span
   class=property>‘<code class=property>font-weight</code>’</span></a>
   property specifies weight of glyphs in the font, their degree of blackness
   or stroke thickness.

  <p>Values have the following meanings:

  <dl>
   <dt>100 to 900

   <dd>These values form an ordered sequence, where each number indicates a
    weight that is at least as dark as its predecessor. These roughly
    correspond to the commonly used weight names below:
  </dl>

  <ul>
   <li>100 - Thin

   <li>200 - Extra Light (Ultra Light)

   <li>300 - Light

   <li>400 - Normal

   <li>500 - Medium

   <li>600 - Semi Bold (Demi Bold)

   <li>700 - Bold

   <li>800 - Extra Bold (Ultra Bold)

   <li>900 - Black (Heavy)
  </ul>

  <dl>
   <dt><strong>normal</strong>

   <dd>Same as ‘<code class=css>400</code>’.

   <dt><strong>bold</strong>

   <dd>Same as ‘<code class=css>700</code>’.

   <dt><strong>bolder</strong>

   <dd>Specifies the weight of the face bolder than the inherited value.

   <dt><strong>lighter</strong>

   <dd>Specifies the weight of the face lighter than the inherited value.
  </dl>

  <p>Font formats that use a scale other than a nine step scale should map
   their scale onto the CSS scale so that 400 roughly corresponds with a face
   that would be labeled as Regular, Book, Roman and 700 roughly matches a
   face that would be labeled as Bold. Or weights may be inferred from the
   style names, ones that correspond roughly with the scale above. The scale
   is relative, so a face with a larger weight value must never appear
   lighter. If style names are used to infer weights, care should be taken to
   handle variations in style names across locales.

  <p>Quite often there are only a few weights available for a particular font
   family. When a weight is specified for which no face exists, a face with a
   nearby weight is used. In general, bold weights map to faces with heavier
   weights and light weights map to faces with lighter weights (see the <a
   href="#font-matching-algorithm">font matching section below</a> for a
   precise definition). The examples here illustrate which face is used for
   different weights, grey indicates a face for that weight does not exist so
   a face with a nearby weight is used:

  <div class=figure><img alt="weight mappings for a family with 400, 700 and
   900 weights" src=optimaweights.png>
   <p class=caption>Weight mappings for a font family with 400, 700 and 900
    weight faces
  </div>

  <div class=figure><img alt="weight mappings for a family with 300, 600
   weights" src=hiraginoweights.png>
   <p class=caption>Weight mappings for a font family with 300 and 600 weight
    faces
  </div>

  <p>Although the practice is not well-loved by typographers, bold faces are
   often synthesized by user agents for faces that lack actual bold faces.
   For the purposes of style matching, these faces must be treated as if they
   exist within the family.

  <p>Values of ‘<code class=property>bolder</code>’ and ‘<code
   class=property>lighter</code>’ indicate values relative to the weight of
   the parent element. Based on the inherited weight value, the weight used
   is calculated using the chart below. Child elements inherit the calculated
   weight, not a value of ‘<code class=property>bolder</code>’ or
   ‘<code class=property>lighter</code>’.

  <table class=data summary="Bolder/lighter mappings">
   <thead>
    <tr>
     <th scope=col>Inherited value

     <th scope=col>bolder

     <th scope=col>lighter

   <tbody>
    <tr>
     <th>100

     <td>400

     <td>100

    <tr>
     <th>200

     <td>400

     <td>100

    <tr>
     <th>300

     <td>400

     <td>100

    <tr>
     <th>400

     <td>700

     <td>100

    <tr>
     <th>500

     <td>700

     <td>100

    <tr>
     <th>600

     <td>900

     <td>400

    <tr>
     <th>700

     <td>900

     <td>400

    <tr>
     <th>800

     <td>900

     <td>700

    <tr>
     <th>900

     <td>900

     <td>700
  </table>

  <p>The table above is equivalent to selecting the next relative bolder or
   lighter face, given a font family containing normal and bold faces along
   with a thin and a heavy face. Authors who desire finer control over the
   exact weight values used for a given element should use numerical values
   instead of relative weights.</p>
  <!-- prop: font-stretch -->

  <h3 id=font-stretch-prop><span class=secno>3.3 </span>Font width: the <a
   href="#propdef-font-stretch">font-stretch</a> property</h3>

  <table class=propdef id=namefont-stretch>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-stretch>font-stretch</dfn>

    <tr>
     <td>Value:

     <td>normal | ultra-condensed | extra-condensed | condensed |
      semi-condensed | semi-expanded | expanded | extra-expanded |
      ultra-expanded | inherit

    <tr>
     <td>Initial:

     <td>normal

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>The <a class=noxref href="#font-stretch-prop"><span
   class=property>‘<code class=property>font-stretch</code>’</span></a>
   property selects a normal, condensed, or expanded face from a font family.
   Absolute keyword values have the following ordering, from narrowest to
   widest:

  <ul>
   <li>Ultra Condensed

   <li>Extra Condensed

   <li>Condensed

   <li>Semi Condensed

   <li>Normal

   <li>Semi Expanded

   <li>Expanded

   <li>Extra Expanded

   <li>Ultra Expanded
  </ul>

  <p>The scale is relative, so a face with a font-stretch value higher in the
   list above should never appear wider. When a face does not exist for a
   given width, normal or condensed values map to a narrower face, otherwise
   a wider face. Conversely, expanded values map to a wider face, otherwise a
   narrower face. The figure below shows how the nine font-stretch property
   settings affect font selection for font family containing a variety of
   widths, grey indicates a width for which no face exists and a different
   width is substituted:

  <div class=figure><img alt="width mappings for a family with condensed,
   normal and expanded faces" src=universwidths.png>
   <p class=caption>Width mappings for a font family with condensed, normal
    and expanded width faces
  </div>
  <!-- prop: font-style -->

  <h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a
   href="#propdef-font-style">font-style</a> property</h3>

  <table class=propdef id=namefont-style>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-style>font-style</dfn>

    <tr>
     <td>Value:

     <td>normal | italic | oblique | inherit

    <tr>
     <td>Initial:

     <td>normal

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>The <a class=noxref href="#font-style-prop"><span
   class=property>‘<code class=property>font-style</code>’</span></a>
   property allows italic or oblique faces to be selected. Italic forms are
   generally cursive in nature while oblique faces are typically sloped
   versions of the regular face. Oblique faces can be simulated by
   artificially sloping the glyphs of the regular face. Compare the
   artificially sloped renderings of Palatino ‘<code
   class=property>a</code>’ and Baskerville ‘<code
   class=property>N</code>’ in grey with the actual italic versions:

  <div class=figure><img alt="artificial sloping vs. real italics"
   src=realvsfakeitalics.png>
   <p class=caption>Artificial sloping versus real italics
  </div>

  <p>A value of ‘<code class=property>normal</code>’ selects a face that
   is classified as ‘<code class=property>normal</code>’, while ‘<code
   class=property>oblique</code>’ selects a font that is labeled ‘<code
   class=property>oblique</code>’. A value of ‘<code
   class=property>italic</code>’ selects a font that is labeled ‘<code
   class=property>italic</code>’, or, if that is not available, one labeled
   ‘<code class=property>oblique</code>’. If no italic or oblique faces
   is available, an oblique face can by synthesized by rendering the normal
   face with a sloping transformation applied.

  <p>Many scripts lack the tradition of mixing a cursive form within text
   rendered with a normal face. Chinese, Japanese and Korean fonts almost
   always lack italic or oblique faces. Fonts that support a mixture of
   scripts will sometimes omit specific scripts such as Arabic from the set
   of glyphs supported in the italic face. User agents should be careful
   about making character map assumptions across faces.</p>
  <!-- prop: font-size -->

  <h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a
   href="#propdef-font-size">font-size</a> property</h3>

  <table class=propdef id=namefont-size>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-size>font-size</dfn>

    <tr>
     <td>Value:

     <td>&lt;absolute-size> | &lt;relative-size> | &lt;length> |
      &lt;percentage> | inherit

    <tr>
     <td>Initial:

     <td>medium

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>refer to parent element's font size

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>absolute length
  </table>

  <p>This property indicates the desired height of glyphs from the font. For
   scalable fonts, the font-size is a scale factor applied to the EM unit of
   the font. (Note that certain glyphs may bleed outside their EM box.) For
   non-scalable fonts, the font-size is converted into absolute units and
   matched against the declared font-size of the font, using the same
   absolute coordinate space for both of the matched values. Values have the
   following meanings:

  <dl>
   <dt><a name=x18><span class=index-def id=ltabsolute-sizegt
    title="&lt;absolute-size&gt;::definition of">
    <strong>&lt;absolute-size&gt;</strong></span></a>

   <dd> An <a class=value-def
    name=value-def-absolute-size>&lt;absolute-size&gt;</a> keyword refers to
    an entry in a table of font sizes computed and kept by the user agent.
    Possible values are:
    <p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p>

   <dt><a name=x19><span class=index-def id=ltrelative-sizegt
    title="&lt;relative-size&gt;::definition
    of"><strong>&lt;relative-size&gt;</strong></span></a>

   <dd> A <a class=value-def
    name=value-def-relative-size>&lt;relative-size&gt;</a> keyword is
    interpreted relative to the table of font sizes and the font size of the
    parent element. Possible values are:
    <p> [ larger | smaller ]

    <p> For example, if the parent element has a font size of ‘<code
     class=property>medium</code>’, a value of ‘<code
     class=property>larger</code>’ will make the font size of the current
     element be ‘<code class=property>large</code>’. If the parent
     element's size is not close to a table entry, the user agent is free to
     interpolate between table entries or round off to the closest one. The
     user agent may have to extrapolate table values if the numerical value
     goes beyond the keywords.

   <dt><span class=index-inst id=ltlengthgt
    title="&lt;length&gt;">&lt;length&gt;</span>

   <dd>A length value specifies an absolute font size (that is independent of
    the user agent's font table). Negative lengths are illegal.

   <dt><span class=index-inst id=ltpercentagegt
    title="&lt;percentage&gt;">&lt;percentage&gt; </span>

   <dd>A percentage value specifies an absolute font size relative to the
    parent element's font size. Use of percentage values, or values in
    ‘<code class=property>em</code>’s, leads to more robust and
    cascadable style sheets.
  </dl>

  <p>The following table provides user agent's guideline for the
   absolute-size scaling factor and their mapping to XHTML heading and
   absolute font-sizes. The ‘<code class=property>medium</code>’ value is
   used as the reference middle value. The user agent may fine-tune these
   values for different fonts or different types of display devices.

  <table class=data>
   <thead>
    <tr>
     <th>CSS absolute-size values

     <th>xx-small

     <th>x-small

     <th>small

     <th>medium

     <th>large

     <th>x-large

     <th>xx-large

     <th> 

   <tbody>
    <tr>
     <th>scaling factor

     <td>3/5

     <td>3/4

     <td>8/9

     <td>1

     <td>6/5

     <td>3/2

     <td>2/1

     <td>3/1

    <tr>
     <th>XHTML headings

     <td>h6

     <td> 

     <td>h5

     <td>h4

     <td>h3

     <td>h2

     <td>h1

     <td> 

    <tr>
     <th>XHTML font sizes

     <td>1

     <td> 

     <td>2

     <td>3

     <td>4

     <td>5

     <td>6

     <td>7
  </table>

  <p class=note><em><strong>Note 1.</strong> To preserve readability, an UA
   applying these guidelines should nevertheless avoid creating font-size
   resulting in less than 9 pixels per EM unit on a computer display .</em>

  <p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling
   factor between adjacent indexes was 1.5 which user experience proved to be
   too large. In CSS2, the suggested scaling factor for computer screen
   between adjacent indexes was 1.2 which still created issues for the small
   sizes. The new scaling factor varies between each index to provide a
   better readability.</em>

  <p>The actual value [link to Cascading module] of this property may differ
   from the computed value due a numerical value on ‘<code
   class=property><a
   href="#propdef-font-size-adjust">font-size-adjust</a></code>’ and the
   unavailability of certain font sizes.

  <p>Child elements inherit the computed <a class=noxref
   href="#font-size-prop"><span class=property>‘<code
   class=property>font-size</code>’</span></a> value (otherwise, the effect
   of <a class=noxref href="#font-size-adjust-prop"><span
   class=property>‘<code
   class=property>font-size-adjust</code>’</span></a> would compound).

  <div class=example>
   <p style=display:none>Example(s):

   <p>

   <pre>p { font-size: 12pt; }
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }
</pre>
  </div>
  <!-- prop: font-size-adjust -->

  <h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing:
   the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3>

  <table class=propdef id=namefont-size-adjust>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn>

    <tr>
     <td>Value:

     <td>&lt;number> | none | inherit

    <tr>
     <td>Initial:

     <td>none

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>For any given font size, the apparent size and legibility of text varies
   across fonts. For scripts such as Latin or Cyrillic that distinguish
   between upper and lowercase letters, the relative height of lowercase
   letters compared to their uppercase counterparts is a determining factor
   of legibility. This is commonly referred to as the <a class=index-def
   href="#aspect" id=aspect0 title="aspect value"><dfn id=aspect>aspect
   value</dfn></a>. Precisely defined, it is equal to the x-height of a font
   divided by the font size.

  <p>In situations where font fallback occurs, fallback fonts may not share
   the same aspect ratio as the desired font family and will thus appear less
   readable. The font-size-adjust property is a way to preserve the
   readability of text when font fallback occurs. It does this by adjusting
   the font-size so that the x-height is the same regardless of the font
   used.

  <div class=example>
   <p>The style defined below defines Verdana as the desired font family, but
    if Verdana is not available Futura or Times will be used.</p>

   <pre>p { 
    font-family: Verdana, Futura, Times; 
}

&lt;p>Lorem ipsum dolor sit amet, ...&lt;/p>
</pre>

   <p>Verdana has a relatively high aspect ratio, lowercase letters are
    relatively tall compared to uppercase letters, so at small sizes text
    appears legible. Times has a lower aspect ratio and so if fallback
    occurs, the text will be less legible at small sizes than Verdana.</p>
  </div>

  <p>How text rendered in each of these fonts compares is shown below, the
   columns show text rendered in Verdana, Futura and Times. The same
   font-size value is used across cells within each row and red lines are
   included to show the differences in x-height. In the upper half each row
   is rendered in the same font-size value. The same is true for the lower
   half but in this half the font-size-adjust property is also set so that
   the actual font size is adjusted to preserve the x-height across each row.
   Note how small text remains relatively legible across each row in the
   lower half.

  <div class=figure><img alt="text with and without font-size-adjust"
   src=fontsizeadjust.png>
   <p class=caption>Text with and without the use of font-size-adjust
  </div>

  <p>This property allows authors to specify an aspect value for an element
   that will effectively preserve the x-height of the first choice font,
   whether it is substituted or not. Values have the following meanings:

  <dl>
   <dt><strong>none</strong>

   <dd>Do not preserve the font's x-height.

   <dt><span class=index-inst id=ltnumbergt
    title="&lt;number&gt;">&lt;number&gt;</span>

   <dd>Specifies the aspect value used in the calculation below to calculate
    the adjusted font size:
    <pre>c  =  ( a / a' ) s 
</pre>

    <p>where:</p>

    <pre>s  =  font-size value
a  =  aspect value as specified by the font-size-adjust property
a' =  aspect value of actual font
c  =  adjusted font-size to use
</pre>

    <p>This value applies to any font that is selected but in typical usage
     it should be based on the aspect value of the first font in the
     font-family list. If this is specified accurately, the <tt>(a/a')</tt>
     term in the formula above is effectively 1 for the first font and no
     adjustment occurs. If the value is specified inaccurately, text rendered
     using the first font in the family list will display differently in
     older user agents that don't support font-size-adjust.</p>
  </dl>

  <p>Authors can calculate the aspect value for a given font by comparing
   spans with the same content but different font-size-adjust properties. If
   the same font-size is used, the spans will match when the font-size-adjust
   value is accurate for the given font.

  <div class=example>
   <p>Two spans with borders are used to determine the aspect value of a
    font. The font-size is the same for both spans but the font-size-adjust
    property is specified only for the right span. Starting with a value of
    0.5, the aspect value can be adjusted until the borders around the two
    letters line up.</p>

   <pre>p {
    font-family: Futura;
    font-size: 500px;
}

span {
    border: solid 1px red;
}

.adjust {
    font-size-adjust: 0.5;
}

&lt;p>&lt;span>b&lt;/span>&lt;span class="adjust">b&lt;/span>&lt;/p>
</pre>

   <div class=figure><img alt="Futura with an aspect value of 0.5"
    src=beforefontsizeadjust.png>
    <p class=caption>Futura with an aspect value of 0.5
   </div>

   <p>The box on the right is a bit bigger than the one on the left, so the
    aspect value of this font is something less than 0.5. Adjust the value
    until the boxes align.</p>
  </div>
  <!-- Hmm, so what should happen for scripts with no upper/lowercase distinction (e.g. CJK, Arabic, Hebrew)? -->
  <!-- prop: font -->
  <!-- jtdfix, crap, preprocessor is inserting links to descriptors rather than properties.  bert, make it stop... -->

  <h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the
   <a href="#propdef-font">font</a> property</h3>

  <table class=propdef id=namefont>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font>font</dfn>

    <tr>
     <td>Value:

     <td>[ [ &lt;‘<code class=property><a
      href="#descdef-font-style">font-style</a></code>’> ||
      &lt;font-variant-css21> || &lt;‘<code class=property><a
      href="#descdef-font-weight">font-weight</a></code>’> ]? &lt;‘<code
      class=property><a href="#propdef-font-size">font-size</a></code>’> [
      / &lt;‘<code class=property>line-height</code>’> ]? &lt;‘<code
      class=property><a
      href="#descdef-font-family">font-family</a></code>’> ] | caption |
      icon | menu | message-box | small-caption | status-bar | inherit

    <tr>
     <td>Initial:

     <td>see individual properties

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>see individual properties

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>see individual properties
  </table>

  <p>The <span class=property>‘<code class=property><a
   href="#propdef-font">font</a></code>’</span> property is, except as
   described below, a shorthand property for setting ‘<code
   class=property><a href="#descdef-font-style">font-style</a></code>’,
   <span class=property>‘<code class=property><a
   href="#propdef-font-variant">font-variant</a></code>’</span>, <span
   class=property>‘<code class=property><a
   href="#descdef-font-weight">font-weight</a></code>’</span>, <span
   class=property>‘<code class=property><a
   href="#propdef-font-size">font-size</a></code>’</span>, ‘<code
   class=property>line-height</code>’, <span class=property>‘<code
   class=property><a
   href="#descdef-font-family">font-family</a></code>’</span> at the same
   place in the stylesheet. Values for the <span class=property>‘<code
   class=property><a
   href="#propdef-font-variant">font-variant</a></code>’</span> property
   may also be included but only those supported in CSS 2.1, none of the
   font-variant values added in this specification can be used in the <span
   class=property>‘<code class=property><a
   href="#propdef-font">font</a></code>’</span> shorthand:

  <pre
   class=prod><dfn id=ltfont-variant-css21gt><var>&lt;font-variant-css21&gt;</var></dfn> = [normal | small-caps]</pre>

  <p>The syntax of this property is based on a traditional typographical
   shorthand notation to set multiple properties related to fonts.

  <p>All font-related properties are first reset to their initial values,
   including those listed in the preceding paragraph plus <span
   class=property>‘<code class=property><a
   href="#descdef-font-stretch">font-stretch</a></code>’</span>, <span
   class=property>‘<code class=property><a
   href="#propdef-font-size-adjust">font-size-adjust</a></code>’</span>,
   <span class=property>‘<code class=property><a
   href="#propdef-font-kerning">font-kerning</a></code>’</span> and all
   font feature properties. Then, those properties that are given explicit
   values in the <span class=property>‘<code class=property><a
   href="#propdef-font">font</a></code>’</span> shorthand are set to those
   values. For a definition of allowed and initial values, see the previously
   defined properties. For reasons of backwards compatibility, it is not
   possible to set <span class=property>‘<code class=property><a
   href="#descdef-font-stretch">font-stretch</a></code>’</span> and <span
   class=property>‘<code class=property><a
   href="#propdef-font-size-adjust">font-size-adjust</a></code>’</span> to
   other than their initial values using the <span class=property>‘<code
   class=property><a href="#propdef-font">font</a></code>’</span> shorthand
   property; instead, set the individual properties.

  <div class=example>
   <p style=display:none>Example(s):

   <p>

   <pre>p { font: 12pt/14pt sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% &quot;new century schoolbook&quot;, serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }
p { font: oblique 12pt &quot;Helvetica Neue&quot;, serif; font-stretch: condensed }
</pre>

   <p> In the second rule, the font size percentage value (‘<code
    class=css>80%</code>’) refers to the font size of the parent element.
    In the third rule, the line height percentage (‘<code
    class=css>110%</code>’) refers to the font size of the element itself.

   <p>The first three rules do not specify the <span class=property>‘<code
    class=property><a
    href="#propdef-font-variant">font-variant</a></code>’</span> and <span
    class=property>‘<code class=property><a
    href="#descdef-font-weight">font-weight</a></code>’</span> explicitly,
    so these properties receive their initial values (‘<code
    class=property>normal</code>’). Notice that the font family name "new
    century schoolbook", which contains spaces, is enclosed in quotes. The
    fourth rule sets the <span class=property>‘<code class=property><a
    href="#descdef-font-weight">font-weight</a></code>’</span> to ‘<code
    class=property>bold</code>’, the <span class=property>‘<code
    class=property><a
    href="#descdef-font-style">font-style</a></code>’</span> to ‘<code
    class=property>italic</code>’, and implicitly sets <span
    class=property>‘<code class=property><a
    href="#propdef-font-variant">font-variant</a></code>’</span> to
    ‘<code class=property>normal</code>’.

   <p> The fifth rule sets the <span class=property>‘<code
    class=property><a
    href="#propdef-font-variant">font-variant</a></code>’</span> (‘<code
    class=property><a href="#small-caps">small-caps</a></code>’), the <span
    class=property>‘<code class=property><a
    href="#propdef-font-size">font-size</a></code>’</span> (120% of the
    parent's font size), the <span class=property>‘<code
    class=property>line-height</code>’</span> (120% of the font size) and
    the <span class=property>‘<code class=property><a
    href="#descdef-font-family">font-family</a></code>’</span> (‘<code
    class=property><a href="#fantasy">fantasy</a></code>’). It follows that
    the keyword ‘<code class=property>normal</code>’ applies to the two
    remaining properties: <span class=property>‘<code class=property><a
    href="#descdef-font-style">font-style</a></code>’</span> and <span
    class=property>‘<code class=property><a
    href="#descdef-font-weight">font-weight</a></code>’</span>.

   <p>The sixth fifth rule sets the <span class=property>‘<code
    class=property><a
    href="#descdef-font-style">font-style</a></code>’</span>, <span
    class=property>‘<code class=property><a
    href="#propdef-font-size">font-size</a></code>’</span>, and <span
    class=property>‘<code class=property><a
    href="#descdef-font-family">font-family</a></code>’</span>, the other
    font properties being set to their initial values. It then sets <span
    class=property>‘<code class=property><a
    href="#descdef-font-stretch">font-stretch</a></code>’</span> to
    ‘<code class=property>condensed</code>’ since that property cannot be
    set to that value using the <span class=property>‘<code
    class=property><a href="#propdef-font">font</a></code>’</span>
    shorthand property.
  </div>

  <p>The following values refer to system fonts:

  <dl>
   <dt><strong>caption</strong>

   <dd>The font used for captioned controls (e.g., buttons, drop-downs,
    etc.).

   <dt><strong>icon</strong>

   <dd>The font used to label icons.

   <dt><strong>menu</strong>

   <dd>The font used in menus (e.g., dropdown menus and menu lists).

   <dt><strong>message-box</strong>

   <dd>The font used in dialog boxes.

   <dt><strong>small-caption</strong>

   <dd>The font used for labeling small controls.

   <dt><strong>status-bar</strong>

   <dd>The font used in window status bars.
  </dl>

  <p>System fonts may only be set as a whole; that is, the font family, size,
   weight, style, etc. are all set at the same time. These values may then be
   altered individually if desired. If no font with the indicated
   characteristics exists on a given platform, the user agent should either
   intelligently substitute (e.g., a smaller version of the ‘<code
   class=property>caption</code>’ font might be used for the ‘<code
   class=property>smallcaption</code>’ font), or substitute a user agent
   default font. As for regular fonts, if, for a system font, any of the
   individual properties are not part of the operating system's available
   user preferences, those properties should be set to their initial values.

  <p>That is why this property is "almost" a shorthand property: system fonts
   can only be specified with this property, not with <span
   class=property>‘<code class=property><a
   href="#descdef-font-family">font-family</a></code>’</span> itself, so
   <span class=property>‘<code class=property><a
   href="#propdef-font">font</a></code>’</span> allows authors to do more
   than the sum of its subproperties. However, the individual properties such
   as <span class=property>‘<code class=property><a
   href="#descdef-font-weight">font-weight</a></code>’</span> are still
   given values taken from the system font, which can be independently
   varied.

  <div class=example>
   <p style=display:none>Example(s):

   <p>

   <pre>button { font: 300 italic 1.3em/1.7em &quot;FB Armada&quot;, sans-serif }
button p { font: menu }
button p em { font-weight: bolder }
</pre>

   <p>If the font used for dropdown menus on a particular system happened to
    be, for example, 9-point Charcoal, with a weight of 600, then P elements
    that were descendants of BUTTON would be displayed as if this rule were
    in effect:

   <pre>button p { font: 600 9pt Charcoal }
</pre>

   <p>Because the <span class=property>‘<code class=property><a
    href="#propdef-font">font</a></code>’</span> shorthand resets to its
    initial value any property not explicitly given a value, this has the
    same effect as this declaration:

   <pre>button p {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9pt;
  line-height: normal;
  font-family: Charcoal
} 
</pre>
  </div>
  <!-- prop: font-synthesis -->

  <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling
   synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a>
   property</h3>

  <table class=propdef id=namefont-synthesis>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-synthesis>font-synthesis</dfn>

    <tr>
     <td>Value:

     <td>none | [ weight || style ]

    <tr>
     <td>Initial:

     <td>weight style

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>This property controls whether user agents are allowed to synthesize
   bold or oblique font faces when a font family lacks bold or italic faces.
   If ‘<code class=property>weight</code>’ is not specified, user agents
   must not synthesize bold faces and if ‘<code
   class=property>style</code>’ is not specified user agents must not
   synthesize italic faces. A value of ‘<code class=property>none</code>’
   disallows all synthetic faces.

  <div class=example>
   <p>The style rule below disables the use of synthetically obliqued Arabic:</p>

   <pre>*:lang(ar) { font-synthesis: none; }
</pre>
  </div>

  <h2 id=font-resources><span class=secno>4 </span>Font resources</h2>

  <h3 id=font-face-rule><span class=secno>4.1 </span>The @font-face rule</h3>

  <p>The @font-face rule allows for linking to fonts that are automatically
   activated when needed. This allows authors to select a font that closely
   matches the design goals for a given page rather than limiting the font
   choice to a set of fonts available on all platforms. A set of font
   descriptors define the location of a font resource, either locally or
   externally, along with the style characteristics of an individual face.
   Multiple @font-face rules can be used to construct font families with a
   variety of faces. Using CSS font matching rules, a user agent can
   selectively download only those faces that are needed for a given piece of
   text.

  <p>The general form of an <span class=index-def id=font-face
   title="@font-face"><em>@font-face</em></span> <span class=index-inst
   id=at-rule title=at-rules>at-rule</span> is:

  <pre>
@font-face { <span class=value-inst-font-description>&lt;font-description&gt;</span> }
</pre>

  <p>where <span class=index-def id=ltfont-descriptiongt
   title="&lt;font-description&gt;::definition of"><a
   name=value-def-font-description>&lt;font-description&gt;</a></span> has
   the form:

  <pre>
descriptor: value;
descriptor: value;
[...]
descriptor: value;
</pre>

  <p>Each <span class=index-inst id=font-face0
   title="@font-face">@font-face</span> rule specifies a value for every font
   descriptor, either implicitly or explicitly. Those not given explicit
   values in the rule take the initial value listed with each descriptor in
   this specification. These descriptors apply solely within the context of
   the @font-face rule in which they are defined, and do not apply to
   document language elements. There is no notion of which elements the
   descriptors apply to or whether the values are inherited by child
   elements. When a given descriptor occurs multiple times in a given
   @font-face rule, only the last specified value is used, all prior values
   for that descriptor are ignored.

  <div class=example>
   <p>To use a downloadable font called Gentium:</p>

   <pre>
@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.ttf);
}

p { font-family: Gentium, serif; }
</pre>

   <p>The user agent will download Gentium and use it when rendering text
    within paragraph elements. If for some reason the site serving the font
    is unavailable, the default serif font will be used.</p>
  </div>

  <p>A given set of @font-face rules define a set of fonts available to
   containing documents. Multiple rules can be used to define a family with a
   large set of faces. When font matching is done fonts defined using these
   rules are considered before other available fonts on a system.

  <p>Downloaded fonts are only available to documents that reference them,
   the process of activating these fonts should not make them available to
   other applications or to documents that don't directly link to the same
   font. User agent implementers might consider it convenient to use
   downloaded fonts when rendering characters in other documents for which no
   other available font exists as part of the system font fallback procedure.
   This would cause a security leak since the contents of one page would be
   able to affect other pages, something an attacker could use as an attack
   vector. These restrictions do not affect caching behavior, fonts are
   cached the same way other web resources are cached.

  <p>User agents which do not understand the @font-face rule encounter the
   opening curly bracket and ignore forward until the closing curly bracket.
   This at-rule conforms with the forward-compatible parsing requirement of
   CSS, parsers may ignore these rules without error. Any descriptors that
   are not recognized or implemented by a given user agent must be ignored.
   @font-face rules require a font-family and src descriptor, if either of
   these are missing the @font-face must be ignored.

  <p>In cases where user agents have limited platform resources or implement
   the ability to disable downloadable font resources, @font-face rules must
   simply be ignored; the behavior of individual descriptors as defined in
   this specification should not be altered.

  <h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a
   href="#descdef-font-family">font-family</a> descriptor</h3>

  <table class=descdef>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=descdef-font-family>font-family</dfn>

    <tr>
     <td>Value:

     <td>&lt;family-name>

    <tr>
     <td><em>Initial:</em>

     <td>N/A
  </table>

  <p>This descriptor defines the font family name that will be used in all
   CSS font family name matching, overriding font family names contained in
   the underlying font data. If the font family name is the same as a font
   family available in a given user's environment, it effectively hides the
   underlying font for documents that use the stylesheet. This permits a web
   author to freely choose font-family names without worrying about conflicts
   with font family names present in a given user's environment. Errors
   loading font data do not affect font name matching behavior. User agents
   that apply platform font aliasing rules to font family names defined via
   @font-face rules are considered non-conformant.

  <h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a
   href="#descdef-src">src</a> descriptor</h3>

  <table class=descdef>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=descdef-src>src</dfn>

    <tr>
     <td>Value:

     <td>[ &lt;uri> [format(&lt;string> [, &lt;string>]*)] |
      &lt;font-face-name> ] [, &lt;uri> [format(&lt;string> [,
      &lt;string>]*)] | &lt;font-face-name> ]*

    <tr>
     <td><em>Initial:</em>

     <td>N/A
  </table>

  <p>This descriptor specifies the resource containing font data. It is
   required, whether the font is downloadable or locally installed. Its value
   is a prioritized, comma-separated list of external references or locally
   installed font face names. When a font is needed the user agent iterates
   over the set of references listed, using the first one it can successfully
   activate. Fonts containing invalid data or local font faces that are not
   found are ignored and the user agent loads the next font in the list
   (platform substitutions for a given font must not be used).

  <p>As with other URIs in CSS, the URI may be partial, in which case it is
   resolved relative to the location of the style sheet containing the <span
   class=index-inst id=font-face1 title="@font-face">@font-face</span> rule.
   In the case of SVG fonts, the URL points to an element within a document
   containing SVG font definitions. If the element reference is omitted, a
   reference to the first defined font is implied.

  <pre>
src: url(fonts/simple.ttf);   /* load simple.ttf relative to stylesheet location */
src: url(/fonts/simple.ttf);  /* load simple.ttf from absolute location */
src: url(fonts.svg#simple);   /* load SVG font with id 'simple' */
</pre>

  <p>External references consist of a URI, followed by an optional hint
   describing the format of the font resource referenced by that URI. The
   format hint contains a comma-separated list of format strings that denote
   well-known font formats. Conformant user agents must skip downloading a
   font resource if the format hints indicate only unsupported or unknown
   font formats. If no format hints are supplied, the user agent should
   download the font resource.

  <pre>
/* load WOFF font if possible, otherwise use OpenType font */
@font-face {
  font-family: bodytext;
  src: url(ideal-sans-serif.woff) format("woff"),
       url(basic-sans-serif.ttf) format("opentype");
}
</pre>

  <p>Format strings defined by this specification:

  <table class=data id=fontformats>
   <thead>
    <tr>
     <th>String

     <th>Font Format

     <th>Common extensions

   <tbody>
    <tr>
     <th>"woff"

     <td>WOFF (Web Open Font Format)

     <td>.woff

    <tr>
     <th>"truetype"

     <td>TrueType

     <td>.ttf

    <tr>
     <th>"opentype"

     <td>OpenType

     <td>.ttf, .otf

    <tr>
     <th>"embedded-opentype"

     <td>Embedded OpenType

     <td>.eot

    <tr>
     <th>"svg"

     <td>SVG Font

     <td>.svg, .svgz
  </table>

  <p>Given the overlap in common usage between TrueType and OpenType, the
   format hints "truetype" and "opentype" must be considered as synonymous; a
   format hint of "opentype" does not imply that the font contains Postscript
   CFF style glyph data or that it contains OpenType layout information (see
   Appendix A for more background on this).

  <p>When authors would prefer to use a locally available copy of a given
   font and download it if it's not, local() can be used. The locally
   installed <span class=index-def id=ltfont-face-namegt
   title="&lt;font-face-name&gt;::definition of"><a
   name=value-def-font-face-name>&lt;font-face-name&gt;</a></span> is a
   format-specific string that uniquely identifies a single font face within
   a larger family. The syntax for a &lt;font-face-name&gt; is a unique font
   face name enclosed by "local(" and ")".

  <pre>
/* regular face of Gentium */
@font-face {
  font-family: MyGentium;
  src: local(Gentium),   /* use locally available Gentium */
       url(Gentium.ttf); /* otherwise, download it */
}
</pre>

  <p>The name can optionally be enclosed in quotes. For OpenType and TrueType
   fonts, this string is used to match only the Postscript name or the full
   font name in the name table of locally available fonts. Which is used
   varies by platform and font, so authors should include both of these names
   to assure proper matching across platforms.

  <pre>
/* bold face of Gentium */
@font-face {
  font-family: MyGentium;
  src: local(Gentium Bold),   /* full font name */
       local(Gentium-Bold),   /* Postscript name */
       url(GentiumBold.ttf);  /* otherwise, download it */
  font-weight: bold;
}
</pre>

  <p>Just as a @font-face rule specifies the characteristics of a single font
   within a family, the unique name used with local() specifies a single
   font, not an entire font family. Defined in terms of OpenType font data,
   the Postscript name is found in the font's <a
   href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>,
   in the name record with nameID = 6 (see <a href="#OPENTYPE"
   rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The
   Postscript name is the commonly used key for all fonts on OSX and for
   Postscript CFF fonts under Windows. The full font name (nameID = 4) is
   used as a unique key for fonts with TrueType glyphs on Windows.

  <p>For OpenType fonts with multiple localizations of the full font name,
   the US English version is used (language ID = 0x409 for Windows and
   language ID = 0 for Macintosh) or the first localization when a US English
   full font name is not available (the OpenType specification recommends
   that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all
   fonts minimally include US English names</a>). User agents that also match
   other full font names, e.g. matching the Dutch name when the current
   system locale is set to Dutch, are considered non-conformant. This is done
   not to prefer English but to avoid matching inconsistencies across font
   versions and OS localizations, since font style names (e.g. "Bold") are
   frequently localized into many languages and the set of localizations
   available varies widely across platform and font version. User agents that
   match a concatenation of family name (nameID = 1) with style name (nameID
   = 2) are considered non-conformant.

  <p>This also allows for referencing faces that belong to larger families
   that cannot otherwise be referenced.

  <div class=example>
   <p>Use a local font or reference an SVG font in another document:</p>

   <pre>
@font-face {
  font-family: Headline;
  src: local(Futura-Medium), 
       url(fonts.svg#MyGeometricModern) format("svg");
}
</pre>

   <p>Create an alias for local Japanese fonts on different platforms:</p>

   <pre>
@font-face {
  font-family: jpgothic;
  src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
}
</pre>

   <p>Reference a font face that cannot be matched within a larger family:</p>

   <pre>
@font-face {
  font-family: Hoefler Text Ornaments;
  /* has the same font properties as Hoefler Text Regular */
  src: local(HoeflerText-Ornaments); 
}
</pre>

   <p>Since localized fullnames should never match, a document with the
    header style rules below would always render using the default serif
    font, regardless whether a particular system locale parameter is set to
    Finnish or not:</p>

   <pre>
@font-face {
  font-family: SectionHeader;
  src: local("Arial Lihavoitu");  /* Finnish fullname for Arial Bold, matching should fail */
  font-weight: bold;
}

h2 { font-family: SectionHeader, serif; }
</pre>

   <p>A conformant user agent should never load the font ‘<code
    class=css>gentium.eot</code>’ in the example below, since it is
    included in the first definition of the ‘<code class=property><a
    href="#descdef-src">src</a></code>’ descriptor which is overridden by
    the second definition in the same @font-face rule:</p>

   <pre>
@font-face {
  font-family: MainText;
  src: url(gentium.eot); /* for compatibility with older non-conformant user agents */
  src: local("Gentium"), url(gentium.ttf);  /* Overrides src definition */
}
</pre>
  </div>

  <h3 id=font-prop-desc><span class=secno>4.4 </span>Font property
   descriptors: the <a href="#descdef-font-style">font-style</a>, <a
   href="#descdef-font-weight">font-weight</a>, <a
   href="#descdef-font-stretch">font-stretch</a> descriptors</h3>

  <table class=descdef>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=descdef-font-style>font-style</dfn>

    <tr>
     <td>Value:

     <td>normal | italic | oblique

    <tr>
     <td><em>Initial:</em>

     <td>normal
  </table>

  <table class=descdef>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=descdef-font-weight>font-weight</dfn>

    <tr>
     <td>Value:

     <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

    <tr>
     <td><em>Initial:</em>

     <td>normal
  </table>

  <table class=descdef>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=descdef-font-stretch>font-stretch</dfn>

    <tr>
     <td>Value:

     <td>normal | ultra-condensed | extra-condensed | condensed |
      semi-condensed | semi-expanded | expanded | extra-expanded |
      ultra-expanded

    <tr>
     <td><em>Initial:</em>

     <td>normal
  </table>

  <p>These descriptors define the characteristics of a font face and are used
   in the process of matching styles to specific faces. For a font family
   defined with several @font-face rules, user agents can either download all
   faces in the family or use these descriptors to selectively download font
   faces that match actual styles used in document. The values for these
   descriptors are the same as those for the corresponding font properties
   except that relative keywords are not allowed, ‘<code
   class=property>bolder</code>’ and ‘<code
   class=property>lighter</code>’. If these descriptors are omitted,
   default values are assumed.

  <p>The value for these font face style attributes is used in place of the
   style implied by the underlying font data. This allows authors to combine
   faces in flexible combinations, even in situations where the original font
   data was arranged differently. User agents that implement synthetic
   bolding and obliqueing must only apply synthetic styling in cases where
   the font descriptors imply this is needed, rather than based on the style
   attributes implied by the font data.

  <h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the
   <a href="#descdef-unicode-range">unicode-range</a> descriptor</h3>

  <table class=descdef>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=descdef-unicode-range>unicode-range</dfn>

    <tr>
     <td>Value:

     <td>&lt;urange> [, &lt;urange>]*

    <tr>
     <td><em>Initial:</em>

     <td>U+0-10FFFF
  </table>

  <p>This descriptor defines the range of Unicode characters supported by a
   given font. The values of <span class=index-def id=lturangegt
   title="&lt;urange&gt;::definition of"><a
   name=value-def-urange>&lt;urange&gt;</a></span> are expressed using
   hexadecimal numbers prefixed by "U+", corresponding to <a
   href="http://www.unicode.org/charts/">Unicode character code points</a>.
   The unicode-range descriptor serves as a hint for user agents when
   deciding whether or not to download a font resource.

  <p>Unicode range values are written using hexadecimal values and are case
   insensitive. Each is prefixed by "U+" and multiple, discontinuous ranges
   are separated by commas. Whitespace before or after commas is ignored.
   Valid character code values vary between 0 and 10FFFF inclusive. A single
   range has three basic forms:

  <ul>
   <li>a single code point (e.g. U+416)

   <li>an interval value range (e.g. U+400-4ff)

   <li>a range where trailing ‘<code class=css>?</code>’ characters imply
    ‘<code class=css>any digit value</code>’ (e.g. U+4??)
  </ul>

  <p>Ranges that do not fit any of the above three forms are considered to be
   parse errors and the descriptor is omitted. Interval ranges consisting of
   a single code point are valid. Ranges specified with ‘?’ that lack an
   initial digit (e.g. "U+???") are also valid, and are treated as if there
   was a single 0 before the question marks (thus, "U+???" = "U+0???" =
   "U+0000-0FFF"). "U+??????" is not a syntax error, even though "U+0??????"
   would be. Ranges can overlap but interval ranges that descend (e.g.
   U+400-32f) are invalid and omitted rather than treated as parse errors;
   they have no effect on other ranges in a list of ranges. Ranges are
   clipped to the domain of Unicode code points (currently 0 - 10FFFF
   inclusive); a range entirely outside the domain is omitted. Without any
   valid ranges, the descriptor is omitted. User agents may normalize the
   list of ranges into a list that is different but represents the same set
   of character code points.

  <p>The character range can be a subset of the full character map of the
   underlying font. The effective unicode-range used when mapping characters
   to fonts is the intersection of the unicode range specified and the
   underlying character map of the font. This means that authors do not need
   to define the unicode-range of a font precisely, broad ranges for which a
   sparse set of code points are defined in the font can be used. Code points
   outside of the defined unicode-range are ignored, regardless of whether
   the font contains a glyph for that code point or not. User agents that
   download fonts for characters outside the defined unicode-range are
   considered non-conformant. Likewise, user agents that render a character
   using a font resource for which the defined unicode-range does not include
   that character are also considered non-conformant.

  <p>Example ranges for specific languages or characters:

  <dl>
   <dt>unicode-range: U+A5;

   <dd>a single code point, the yen/yuan symbol

   <dt>unicode-range: U+0-7F;

   <dd>code range for basic ASCII characters

   <dt>unicode-range: U+590-5ff;

   <dd>code range for Hebrew characters

   <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;

   <dd>code range for Japanese kanji, hiragana and katakana characters plus
    yen/yuan symbol
  </dl>

  <div class=example>
   <p>The BBC provides news services in a wide variety of languages, many
    that are not well supported across all platforms. Using an @font-face
    rule, the BBC could provide a font for any of these languages, as it
    already does via a manual font download.</p>

   <pre>
@font-face {
  font-family: BBCBengali;
  src: url(fonts/BBCBengali.ttf) format("opentype");
  unicode-range: U+00-FF, U+980-9FF;
}
</pre>
  </div>

  <div class=example>
   <p>Technical documents often require a wide range of symbols. The STIX
    Fonts project is one project aimed at providing fonts to support a wide
    range of technical typesetting in a standardized way. The example below
    shows the use of a font that provides glyphs for many of the mathematical
    and technical symbol ranges within Unicode:</p>

   <pre>
@font-face {
  font-family: STIXGeneral;
  src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
  unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
}
</pre>
  </div>

  <p>Multiple @font-face rules with different unicode ranges for the same
   family and style descriptor values can be used to create composite fonts
   that mix the glyphs from different fonts for different scripts. This can
   be used to combine fonts that only contain glyphs for a single script
   (e.g. Latin, Greek, Cyrillic) or it can be used by authors as a way of
   segmenting a font into fonts for commonly used characters and less
   frequently used characters. Since the user agent will only pull down the
   fonts it needs this helps reduce page bandwidth.

  <p class=issue>It has been suggested that named ranges for commonly used
   ranges be defined. Is this useful and if so, what should those ranges be
   based on (e.g. Unicode's block definitions)? This would be especially
   helpful for CJK segmenting where the goal would be to have named ranges
   that group codepoints by relative frequency but it's unclear what source
   to use as a basis for specifying this.

  <p>If the unicode ranges overlap for a set of @font-face rules with the
   same family and style descriptor values, the rules are ordered in the
   reverse order they were defined; the last rule defined is the first to be
   checked for a given character.

  <div class=example>
   <p>This example shows how an author can override the glyphs used for Latin
    characters in a Japanese font with glyphs from a different font. The
    first rule specifies no range so it defaults to the entire range. The
    range specified in the second rule overlaps but takes precedence because
    it is defined later.</p>

   <pre>
@font-face {
  font-family: JapaneseWithGentium;
  src: local(MSMincho);
  /* no range specified, defaults to entire range */
}

@font-face {
  font-family: JapaneseWithGentium;
  src: url(../fonts/Gentium.ttf);
  unicode-range: U+0-2FF;
}
</pre>
  </div>

  <div class=example>
   <p>Consider a family constructed to optimize bandwidth by separating out
    Latin, Japanese and other characters into different font files:</p>

   <pre>
/* fallback font - size: 4.5MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansFallback.ttf);
  /* no range specified, defaults to entire range */
}

/* Japanese glyphs - size: 1.2MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansJapanese.ttf);
  unicode-range: U+3000-9FFF, U+ff??;
}

/* Latin, Greek, Cyrillic along with some 
   punctuation and symbols - size: 190KB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSans.ttf);
  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
}
</pre>

   <p>For simple Latin text, only the font for Latin characters is
    downloaded:</p>

   <pre>
body { font-family: DroidSans; }

&lt;p>This is that&lt;/p>
</pre>

   <p>In this case the user agent first checks the unicode-range for the font
    containing Latin characters (DroidSans.ttf). Since all the characters
    above are in the range U+0-5FF, the user agent downloads the font and
    renders the text with that font.</p>

   <p>Next, consider text that makes use of an arrow character (⇨):</p>

   <pre>
&lt;p>This &amp;#x21e8; that&lt;p>
</pre>

   <p>The user agent again first checks the unicode-range of the font
    containing Latin characters. Since U+2000-2300 includes the arrow code
    point (U+21E8), the user agent downloads the font. For this character
    however the Latin font does not have a matching glyph, so the effective
    unicode-range used for font matching excludes this code point. Next, the
    user agent evaluates the Japanese font. The unicode-range for the
    Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the
    user agent does not download the Japanese font. Next the fallback font is
    considered. The @font-face rule for the fallback font does not define
    unicode-range so its value defaults to the range of all Unicode code
    points. The fallback font is downloaded and used to render the arrow
    character.</p>
  </div>
  <!-- 
  Tools to create subsetted fonts a problem.  
  Also, combining diacritics represent a nasty side issue here.  
-->

  <h3 id=font-rend-desc><span class=secno>4.6 </span>Font features: the <a
   href="#descdef-font-variant">font-variant</a> and <a
   href="#descdef-font-feature-settings">font-feature-settings</a>
   descriptors</h3>

  <table class=descdef>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=descdef-font-variant>font-variant</dfn>

    <tr>
     <td>Value:

     <td>normal | [ &lt;common-lig-values&gt; ||
      &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
      &lt;contextual-alt-values&gt; || stylistic(&lt;feature-value-name&gt;)
      || historical-forms || styleset(&lt;feature-value-name&gt; [,
      &lt;feature-value-name&gt;]*) ||
      character-variant(&lt;feature-value-name&gt;
      [,&lt;feature-value-name&gt;]*) || swash(&lt;feature-value-name&gt;) ||
      ornaments(&lt;feature-value-name&gt;) ||
      annotation(&lt;feature-value-name&gt;) || ruby || &lt;caps-value&gt; ||
      &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
      &lt;numeric-fraction-values&gt; || slashed-zero ||
      &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ]

    <tr>
     <td><em>Initial:</em>

     <td>normal
  </table>

  <table class=descdef>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=descdef-font-feature-settings>font-feature-settings</dfn>

    <tr>
     <td>Value:

     <td>normal | &lt;feature-tag-value&gt; [, &lt;feature-tag-value&gt;]*

    <tr>
     <td><em>Initial:</em>

     <td>normal
  </table>

  <p>These descriptors define settings that apply when the font defined by an
   @font-face rule is rendered. They do not affect font selection. Values are
   identical to those defined for the corresponding ‘<code
   class=property><a href="#propdef-font-variant">font-variant</a></code>’
   and ‘<code class=property><a
   href="#propdef-font-feature-settings">font-feature-settings</a></code>’
   properties defined below except that the value ‘<code
   class=property>inherit</code>’ is omitted. When multiple font feature
   descriptors or properties are used, the cumulative effect on text
   rendering is described below.

  <h3 id=font-face-loading><span class=secno>4.7 </span>Font loading
   guidelines</h3>

  <p>The @font-face rule is designed to allow lazy loading of fonts, fonts
   are only downloaded when needed for use within a document. A stylesheet
   can include @font-face rules for a library of fonts of which only a select
   set are used; user agents must only download those fonts that are referred
   to within the style rules applicable to a given page. User agents that
   download all fonts defined in @font-face rules without considering whether
   those fonts are in fact used within a page are considered non-conformant.
   In cases where a font might be downloaded in character fallback cases,
   user agents may download a font if it's listed in a font list but is not
   actually used for a given text run.

  <pre>
@font-face {
  font-family: GeometricModern;
  src: url(font.ttf);
}

p {
  /* font will be downloaded for pages with p elements */
  font-family: GeometricModern, sans-serif;
}

h2 {
  /* font may be downloaded for pages with h2 elements, even if Futura is available locally */
  font-family: Futura, GeometricModern, sans-serif;
}
</pre>

  <p>In cases where textual content is loaded before downloadable fonts are
   available, user agents may render text as it would be rendered if
   downloadable font resources are not available or they may render text
   transparently with fallback fonts to avoid a flash of text using a
   fallback font. In cases where the font download fails user agents must
   display text, simply leaving transparent text is considered non-conformant
   behavior. Authors are advised to use fallback fonts in their font lists
   that closely match the vertical metrics of the downloadable fonts to avoid
   large page reflows where possible.

  <h3 id=same-origin-restriction><span class=secno>4.8 </span>Same-origin
   restriction for fonts</h3>

  <h4 id=default-same-origin-restriction><span class=secno>4.8.1
   </span>Default same-origin restriction</h4>

  <p>User agents must implement a same-origin restriction when loading fonts
   via the @font-face mechanism. This restriction limits the loading of fonts
   for a given document to fonts loaded from the same origin. Fonts can only
   be loaded via the same host, port, and method combination as the
   containing document, using the <a
   href="http://www.w3.org/TR/html5/origin-0.html">origin matching
   algorithm</a> described in the <a href="#HTML5"
   rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification. The origin of
   the stylesheet containing @font-face rules is not used when deciding
   whether a font is same origin or not, only the origin of the containing
   document is used. The restriction applies to all font types.

  <p class=issue>Some implementers would prefer to define a new mechanism
   (tentatively named From-Origin) to control access to all resource types,
   in preference to the origin matching algorithm referred to here. As such,
   this subsection should be considered at risk for alteration if such an
   alternative mechanism is defined.

  <p>Given a document located at http://example.com/page.html, fonts defined
   with ‘<code class=property><a href="#descdef-src">src</a></code>’
   definitions considered cross origin must not be loaded:

  <pre>
/* same origin (i.e. domain, protocol, port match document) */
src: url(fonts/simple.ttf);                     
src: url(//fonts/simple.ttf);                     

/* cross origin, different protocol */
src: url(https://example.com/fonts/simple.ttf);              

/* cross origin, different domain */
src: url(http://another.example.com/fonts/simple.ttf); 
</pre>

  <h4 id=allowing-cross-origin-font-loading><span class=secno>4.8.2
   </span>Allowing cross-origin font loading</h4>

  <p>User agents must also implement the ability to relax this restriction
   using cross-site origin controls <a href="#CORS"
   rel=biblioentry>[CORS]<!--{{!CORS}}--></a>. Sites can explicitly allow
   cross-site downloading of font data using the
   <code>Access-Control-Allow-Origin</code> HTTP header.

  <p class=issue>If an alternative mechanism to control resource loading
   (such as the suggested From-Origin HTTP header) is specified, the
   appropriate mechanism to relax the default same-origin restriction for
   @font-face may also change. As such, this subsection should be considered
   at risk for alteration if such an alternative mechanism is defined.

  <h2 id=font-matching-algorithm><span class=secno>5 </span>Font matching
   algorithm</h2>

  <p>The algorithm below describes how fonts are associated with individual
   runs of text. For each character in the run a font family is chosen and a
   particular font face is selected containing a glyph for that character.

  <h3 id=font-style-matching><span class=secno>5.1 </span>Matching font
   styles</h3>

  <p> The procedure for choosing fonts consists of iterating over the font
   families determined by the font-family property, selecting a font face
   with the appropriate style based on other font properties and then
   determining whether a glyph exists for a given character.

  <ol id=fontmatchingalg>
   <li>Using the computed font property values for a given element, the user
    agent starts with the first family name in the fontlist specified by the
    <span class=property>‘<code class=property><a
    href="#descdef-font-family">font-family</a></code>’</span> property.

   <li>If the family name is unquoted and is a generic family name, the user
    agent looks up the appropriate font family name to be used. User agents
    may choose the generic font family to use based on the language of the
    containing element or the Unicode range of the character.

   <li>For other family names, the user agent attempts to find the family
    name among fonts defined via @font-face rules and then among available
    system fonts, matching names with a case-insensitive comparison. On
    systems containing fonts with multiple localized font family names, user
    agents must match any of these names independent of the underlying system
    locale or platform API used. If a font family defined via @font-face
    rules contains only invalid font data, it should be considered as if a
    font was present but contained an empty character map; matching a
    platform font with the same name must not occur in this case.

   <li>If a font family match occurs, the user agent assembles the set of
    font faces in that family that contain a glyph for the character. It then
    narrows this matching set to a single face using other font properties in
    the order given below:
    <ol id=fontstylematchingalg>
     <li><span class=property>‘<code class=property><a
      href="#descdef-font-stretch">font-stretch</a></code>’</span> is tried
      first. If the matching set contains faces with width values matching
      the ‘<code class=property><a
      href="#descdef-font-stretch">font-stretch</a></code>’ value, faces
      with other width values are removed from the matching set. If there is
      no face that exactly matches the width value the nearest width is used
      instead. If the value of ‘<code class=property><a
      href="#descdef-font-stretch">font-stretch</a></code>’ is ‘<code
      class=property>normal</code>’ or one of the condensed values,
      narrower width values are checked first, then wider values. If the
      value of ‘<code class=property><a
      href="#descdef-font-stretch">font-stretch</a></code>’ is one of the
      expanded values, wider values are checked first, followed by narrower
      values. Once the closest matching width has been determined by this
      process, faces with other widths are removed from the matching set.

     <li><span class=property>‘<code class=property><a
      href="#descdef-font-style">font-style</a></code>’</span> is tried
      next. If the value of ‘<code class=property><a
      href="#descdef-font-style">font-style</a></code>’ is ‘<code
      class=property>italic</code>’, italic faces are checked first, then
      oblique, then normal faces. If the value is ‘<code
      class=property>oblique</code>’, oblique faces are checked first, then
      italic faces and then normal faces. If the value is ‘<code
      class=property>normal</code>’, normal faces are checked first, then
      oblique faces, then italic faces. Faces with other style values are
      excluded from the matching set. User agents are permitted to
      distinguish between italic and oblique faces within platform font
      families but this is not required, they may treat all italic or oblique
      faces as italic faces. However, within font families defined via
      @font-face rules, italic and oblique faces must be distinguished using
      the value of the ‘<code class=property><a
      href="#descdef-font-style">font-style</a></code>’ descriptor.

     <li><span class=property>‘<code class=property><a
      href="#descdef-font-weight">font-weight</a></code>’</span> is matched
      next, it will always reduce the matching set to a single font face. If
      bolder/lighter relative weights are used, the effective weight is
      calculated based on the inherited weight value, as described in the
      definition of the ‘<code class=property><a
      href="#descdef-font-weight">font-weight</a></code>’ property. Given
      the desired weight and the weights of faces in the matching set after
      the steps above, if the desired weight is available that face matches.
      Otherwise, a weight is chosen using the rules below:
      <ul>
       <li>If the desired weight is less than 400, weights below the desired
        weight are checked in descending order followed by weights above the
        desired weight in ascending order until a match is found.

       <li>If the desired weight is greater than 500, weights above the
        desired weight are checked in ascending order followed by weights
        below the desired weight in descending order until a match is found.

       <li>If the desired weight is 400, 500 is checked first and then the
        rule for desired weights less than 400 is used.

       <li>If the desired weight is 500, 400 is checked first and then the
        rule for desired weights less than 400 is used.
      </ul>

     <li><span class=property>‘<code class=property><a
      href="#propdef-font-size">font-size</a></code>’</span> must be
      matched within a UA-dependent margin of tolerance. (Typically, sizes
      for scalable fonts are rounded to the nearest whole pixel, while the
      tolerance for bitmapped fonts could be as large as 20%.) Further
      computations, e.g., by ‘<code class=property>em</code>’ values in
      other properties, are based on the <span class=property>‘<code
      class=property><a
      href="#propdef-font-size">font-size</a></code>’</span> value that is
      used, not the one that is specified.
    </ol>

   <li>If no matching face exists or the matched face does not contain a
    glyph for the character to be rendered, the next family name is selected
    and the previous two steps repeated. If the matched font is defined via
    an @font-face rule, the font resource is downloaded. If the matched font
    is defined via @font-face and needs to be downloaded, the user agent can
    either wait until the font is downloaded or render once with substituted
    font metrics and render again once the font is downloaded.

   <li>If there are no more font families to be evaluated and no matching
    face has been found, then the user agent performs a <em>system font
    fallback</em> procedure to find the best match for the character to be
    rendered. The result of this procedure may vary across user agents.

   <li>If a particular character cannot be displayed using any font, the user
    agent should indicate by some means that a character is not being
    displayed, displaying either a symbolic representation of the missing
    glyph (e.g. using a <a
    href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort
    Font</a>) or using the missing character glyph from a default font.
  </ol>

  <h3 id=char-handling-issues><span class=secno>5.2 </span>Character handling
   issues</h3>

  <p>The procedure above is always performed on text runs containing Unicode
   characters, documents using legacy encodings are assumed to have been
   transcoded before matching fonts. For fonts containing character maps for
   both legacy encodings and Unicode, the contents of the legacy encoding
   character map must have no effect on the results of the font matching
   process.

  <p>The font matching process does not assume that text runs are in either
   normalized or denormalized form (see <a href="#CHARMOD-NORM"
   rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more
   details). Layout engines often convert base character plus combining
   character sequences into precomposed characters if they exist. Fonts can
   generally support both ways of matching characters but variations can
   occur. Authors should always tailor their choice of fonts to their
   content, including whether that content contains normalized or
   denormalized character streams.

  <p>If a text run contains Unicode variation selectors, special handling is
   required. For each character + variation selector pair, if the first font
   with a glyph for the base character also contains a glyph for the variant
   specified by the variation selector, user agents must display the variant
   glyph instead of the default one. If the first font with a glyph for the
   base character does not have a glyph for the variation selector pair, the
   default glyph is displayed.

  <p>If a given character is a Private-Use Area Unicode codepoint and none of
   the fonts in the fontlist contain a glyph for that codepoint, user agents
   must display some form of missing glyph symbol for that character rather
   than attempting system font fallback for that codepoint. When matching the
   replacement character U+FFFD, user agents may skip the font matching
   process and immediately display some form of missing glyph symbol, they
   are not required to display the glyph from the font that would be selected
   by the font matching process.

  <p>In general, the fonts for a given family will all have the same or
   similar character maps. The process outlined here is designed to handle
   even font families containing faces with widely variant character maps.
   However, authors are cautioned that the use of such families can lead to
   unexpected results. A special character only available in the condensed
   italic face of a family may still be used even when font properties imply
   a bold expanded face should be used instead.

  <p>Optimizations of this process are allowed provided that an
   implementation behaves as if the algorithm had been followed exactly.
   Matching occurs in a well-defined order to insure that the results are as
   consistent as possible across user agents, given an identical set of
   available fonts and rendering technology.

  <p class=issue>How to match grapheme clusters needs to be specified
   explicitly.

  <h3 id=font-matching-changes><span class=secno>5.3 </span>Font matching
   changes since CSS 2.1</h3>

  <p>The algorithm above is different from CSS 2.1 in a number of key places.
   These changes were made to better reflect actual font matching behavior
   across user agent implementations.

  <p>Differences compared to the font matching algorithm in CSS 2.1:

  <ul>
   <li>The algorithm includes font-stretch matching.

   <li>All possible font-style matching scenarios are delineated.

   <li>Small-caps fonts are not matched as part of the font matching process,
    they are now handled via font features.

   <li>Unicode variation selector matching is required.
  </ul>
  <!-- 

<h3>Examples of font matching</h3>

<p>Simple to complex examples:</p>

<div class="example">
<p>bold italic</p>
</div>

<div class="example">
<p>italic (synthesized)</p>
</div>

<div class="example">
<p>specific weights</p>
</div>

<div class="example">
<p>bolder/lighter</p>
</div>

<div class="example">
<p>bolder (synthesized)</p>
</div>

<div class="example">
<p>condensed</p>
</div>

<div class="example">
<p>run of text containing diacritics</p>
</div>

<div class="example">
<p>run of text containing mixture of Japanese/English</p>
</div>

<div class="example">
<p>simple downloaded font</p>
</div>

<div class="example">
<p>font-face with local/url combination</p>
</div>

-->

  <div class=example>
   <p>It's useful to note that the CSS selector syntax may be used to create
    language-sensitive typography. For example, some Chinese and Japanese
    characters are unified to have the same Unicode code point, although the
    abstract glyphs are not the same in the two languages.

   <pre>*:lang(ja-jp) { font: 900 14pt/16pt &quot;Heisei Mincho W9&quot;, serif; }
*:lang(zh-tw) { font: 800 14pt/16.5pt &quot;Li Sung&quot;, serif; }
</pre>

   <p>This selects any element that has the given language - Japanese or
    Traditional Chinese - and uses the appropriate font.
  </div>

  <h2 id=font-rend-props><span class=secno>6 </span>Font feature properties</h2>

  <p>Modern font technologies support a variety of advanced typographic and
   language-specific font features. Using these features, a single font can
   provide glyphs for a wide range of ligatures, contextual and stylistic
   alternates, tabular and old-style figures, small capitals, automatic
   fractions, swashes, and alternates specific to a given language. To allow
   authors control over these font capabilities, the font-variant property
   has been expanded for CSS3, it now functions as a shorthand for a set of
   properties that provide control over stylistic font features.

  <h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph
   selection and positioning</h3>

  <p>Simple fonts used for displaying Latin text use a very basic processing
   model, fonts contain a character map which maps a given character to a
   glyph for that character. Glyphs for subsequent characters are simply
   placed next in line along a run of text. Font formats such as OpenType and
   AAT (Apple Advanced Typography) use a richer processing model, the glyph
   for a given character can be chosen and positioned not just based on a
   single character, but also based on surrounding characters along with the
   language, script, and features enabled for the text. Font features may be
   required for specific scripts, or recommended as enabled by default or
   they may be stylistic features meant to be used under author control.

  <p>For a good visual overview of these features, see the <a
   href="#OPENTYPE-FONT-GUIDE"
   rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
   For a detailed description of glyph processing for OpenType fonts, see <a
   href="#WINDOWS-GLYPH-PROC"
   rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>.

  <p>The subproperties of font-variant listed below are used to control these
   stylistic font features; they do not control features that are required
   for displaying certain scripts, such as the OpenType features used when
   displaying Arabic or Indic language text. They affect glyph selection and
   positioning, they do not affect font selection as described in the font
   matching section (except in cases required for compatibility with CSS
   2.1).

  <p>To assure consistent behavior across user agents, the equivalent
   OpenType property settings are listed for individual properties and must
   be considered normative. When using other font formats these should be
   used as a guideline to map CSS font feature property values to specific
   font features.

  <p class=issue>The complete set of features on by default is not completely
   specified in OpenType documentation. Should these be listed in a normative
   appendix or should a more complete list be requested from those
   controlling the OpenType specification?</p>
  <!--

<p>For fonts defined via @font-face rules, the ‘<code class=property>font-variant</code>’
descriptor of the @font-face rule described below can be used to
specify font features that only apply to a given font.

Features not supported by any of the properties defined here
can be enabled using the
‘<code class=property>font-feature-settings</code>’ descriptor of the @font-face rule allows the
use of infrequently used font features. Authors are encouraged to use
‘<code class=property>font-variant</code>’ properties whenever possible.</p>

All of these properties assume that fonts define a given set of
default rendering styles; if a specific font feature is not explicitly
enabled or disabled the default rendering style is used.  For each of
these properties, the value ‘<code class=property>normal</code>’ implies using the font
defaults.</p>

<p>Like other font properties, font feature properties apply independent
of the font specified.  In some cases, font feature settings are
font-specific, such as when specifying swash characters or stylistic
alternates. In these situations, the ‘<code class=property>font-variant</code>’ descriptor of the
@font-face rule described below can be used to specify font features
that only apply to a given font and not to other fonts when fallback
occurs.  For features not supported by any of the properties defined
here, the ‘<code class=property>font-feature-settings</code>’ descriptor of the @font-face rule allows
the use of infrequently used font features. Authors are encouraged
to use ‘<code class=property>font-variant</code>’ properties whenever possible.</p>

<p>For features not supported by subproperties of font-variant defined
below, the ‘<code class=property>font-feature-settings</code>’ descriptor of the @font-face rule allows
the use of infrequently used font features. Authors are encouraged
to use ‘<code class=property>font-variant</code>’ properties whenever possible.</p>


-->

  <h3 id=language-specific-support><span class=secno>6.2
   </span>Language-specific display</h3>

  <p>OpenType also supports language-specific glyph selection and
   positioning, so that text can be displayed correctly in cases where the
   language dictates a specific display behavior. Languages often share a
   common script but the shape of certain letters may vary across those
   languages, such as the variations in certain Cyrillic letters used in
   Russian and Bulgarian text. In Latin text, it's common to render "fi" with
   an explicit fi-ligature that lacks a dot on the "i". However, in languages
   such as Turkish which uses both a dotted-i and a dotless-i, it's important
   to not use this ligature or use a specialized version that contains a dot
   over the "i". The example below shows language-specific variations based
   on stylistic traditions found in Spanish, Italian and French orthography:

  <div class=featex><img alt="language specific forms, spanish"
   src=locl-1.png></div>

  <div class=featex><img alt="language specific forms, italian"
   src=locl-2.png></div>

  <div class=featex><img alt="language specific forms, french"
   src=locl-3.png></div>

  <p>Users agents are required to infer the OpenType language system from the
   value of the ‘<code class=property>lang</code>’ attribute and use that
   when selecting and positioning glyphs using an OpenType font. If the
   ‘<code class=property>lang</code>’ attribute is not defined, the
   default OpenType language system must be used.

  <p>In some cases it may be necessary to explicitly declare the OpenType
   language to be used, for example when displaying text in a given language
   that uses the typographic conventions of another language, or when the
   font does not explicitly support a given language but supports a language
   that shares common typographic conventions. The ‘<code class=property><a
   href="#propdef-font-language-override">font-language-override</a></code>’
   property is used for this purpose.

  <p class=issue>Should user agents be allowed to infer the Opentype language
   or simply use only the default language system?</p>
  <!-- prop: font-kerning -->

  <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a
   href="#propdef-font-kerning">font-kerning</a> property</h3>

  <table class=propdef id=namefont-kerning>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-kerning>font-kerning</dfn>

    <tr>
     <td>Value:

     <td>auto | normal | none

    <tr>
     <td>Initial:

     <td>auto

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>Kerning is the contextual adjustment of inter-glyph spacing. This
   property controls metric kerning, kerning that utilizes adjustment data
   contained in the font. The value ‘<code class=property>normal</code>’
   implies that kerning is applied while the value ‘<code
   class=property>none</code>’ implies that kerning is not applied when
   rendering text. If the value is ‘<code class=property>auto</code>’, a
   user agent is free to choose whether kerning is enabled or not by default
   and to vary that default based on the underlying text script.

  <p>For fonts that do not include kerning data this property will have no
   visible effect. When rendering with OpenType fonts, the <a
   href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>
   specification suggests that kerning be enabled by default. When kerning is
   enabled, the OpenType <code>kern</code> feature is enabled. User agents
   must also support fonts that only support kerning via data contained in a
   ‘<code class=property>kern</code>’ font table, as detailed in the
   OpenType specification. Authors may prefer to disable kerning in
   situations where performance is more important that precise appearance. If
   the ‘<code class=property>letter-spacing</code>’ property is defined,
   kerning adjustments are considered part of the default spacing, letter
   spacing adjustments are made after kerning has been applied.</p>
  <!-- prop: font-variant-position -->

  <h3 id=font-variant-position-prop><span class=secno>6.4 </span>Subscript,
   superscript and ordinal forms: the <a
   href="#propdef-font-variant-position">font-variant-position</a> property</h3>

  <table class=propdef id=namefont-variant-position>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-variant-position>font-variant-position</dfn>

    <tr>
     <td>Value:

     <td>normal | sub | super | ordinal

    <tr>
     <td>Initial:

     <td>normal

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p class=issue>The name for this feature has been a point of contention,
   this name is a placeholder until the final name is resolved.

  <p>This property controls the selection of alternate glyphs for use as
   subscripts, superscripts and ordinals. These alternate glyphs of reduced
   size are positioned within the same em-box as the default glyph and
   explicitly designed to match the surrounding text and make the them more
   readable without affecting the linebox.

  <div class=figure><img alt="comparison between real subscript glyphs and
   synthesized ones" src=realsubscripts.png>
   <p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts
    (bottom)
  </div>

  <p>The values ‘<code class=property>sub</code>’, ‘<code
   class=property>super</code>’, and ‘<code
   class=property>ordinal</code>’ imply the appropriate variant glyph is
   displayed when available in the font (OpenType features: <code>subs, supr,
   ordn</code>). Because of the semantic nature of subscripts and
   superscripts, when the value is either ‘<code
   class=property>sub</code>’ or ‘<code class=property>super</code>’
   and a variant glyph is not available, a simulated glyph is synthesized
   using a reduced form of the default glyph. If the value is ‘<code
   class=property>ordinal</code>’ and a variant glyph is not available, the
   normal glyph is used, no attempt is made to synthesize one. A value of
   ‘<code class=property>normal</code>’ implies use of the default glyph
   at normal size.

  <p>In the case of OpenType fonts that lack subscript or superscript glyphs
   for a given character, to calculate the size and offset of the synthesized
   substitutes user agents must use the appropriate subscript and superscript
   metrics specified in the selected font's <a
   href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2
   table</a> <a href="#OPENTYPE"
   rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>.

  <p>In the past, user agents have used font-size and vertical-align to
   simulate subscripts and superscripts for the <code>sub</code> and
   <code>sup</code> elements. To allow a backwards compatible way of defining
   subscripts and superscripts, it is recommended that authors use
   conditional rules <a href="#CSS3-CONDITIONAL"
   rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that
   older user agents will still render these correctly.

  <p>Note that because this property is not cumulative, it's not suitable for
   nested subscripts or superscripts. Due to this limitation,
   font-variant-position is not recommended for use in user agent
   stylesheets.

  <p class=issue>It would be nice to define this in a way such that it would
   work with nested subscripts or superscripts which would allow it to be
   used in user agent stylesheets. But one of the goals for this is to allow
   simple subscripts and superscripts to be displayed without affecting the
   line box. To achieve both appears to be a very hairy problem. One <a
   href="http://lists.w3.org/Archives/Public/www-style/2011Apr/0391.html">proposal</a>
   is to conditionalize how the font-size and vertical-align properties are
   used based on whether subscript or superscript glyphs are available.

  <p class=issue>Fonts often include default values for subscript/superscript
   metrics. As a result, a mixture of designed glyphs and simulated glyphs
   may not display correctly, the baseline will appear to bounce between
   sequences to designed and simulated glyphs.

  <div class=example>
   <p>A typical user agent default style for the <code>sub</code> element:</p>

   <pre>sub {
  vertical-align: sub;
  font-size: smaller;
  line-height: normal;
}
</pre>

   <p>Using font-variant-position to specify typographic subscripts in a way
    that will still show subscripts in older user agents:</p>

   <pre>@supports ( font-variant-position: sub ) {

  sub {
    vertical-align: inherit;
    font-size: 100%;
    line-height: inherit;
    font-variant-position: sub;
  }

}
</pre>

   <p>User agents that support the ‘<code class=property><a
    href="#propdef-font-variant-position">font-variant-position</a></code>’
    property will select a subscript variant glyph and render this without
    adjusting the baseline or font-size. Older user agents will ignore the
    ‘<code class=property><a
    href="#propdef-font-variant-position">font-variant-position</a></code>’
    property definition and use the standard defaults for subscripts.</p>
  </div>
  <!-- prop: font-variant-ligatures -->

  <h3 id=font-variant-ligatures-prop><span class=secno>6.5 </span>Ligatures:
   the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
   property</h3>

  <table class=propdef id=namefont-variant-ligatures>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn>

    <tr>
     <td>Value:

     <td>normal | inherit | [ &lt;common-lig-values> ||
      &lt;discretionary-lig-values> || &lt;historical-lig-values> ]

    <tr>
     <td>Initial:

     <td>normal

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>Specifies control over which ligatures are enabled or disabled. A value
   of ‘<code class=property>normal</code>’ implies that the defaults set
   by the font are used.

  <pre
   class=prod><dfn id=ltcommon-lig-values><var>&lt;common-lig-values></var></dfn>     = [ common-ligatures | no-common-ligatures ]</pre>

  <pre
   class=prod><dfn id=ltdiscretionary-lig-values><var>&lt;discretionary-lig-values></var></dfn> = [ discretionary-ligatures | no-discretionary-ligatures ]</pre>

  <pre
   class=prod><dfn id=lthistorical-lig-values><var>&lt;historical-lig-values></var></dfn> = [ historical-ligatures | no-historical-ligatures ]</pre>

  <p>Individual values have the following meanings:

  <dl>
   <dt><dfn id=common-ligatures>common-ligatures</dfn>

   <dd>Enables display of common ligatures (OpenType feature:
    <code>liga</code>). For OpenType fonts, common ligatures are enabled by
    default.
  </dl>

  <div class=featex><img alt="common ligature example" src=liga.png></div>

  <dl>
   <dt><dfn id=no-common-ligatures>no-common-ligatures</dfn>

   <dd>Disables display of common ligatures (OpenType feature:
    <code>liga</code>).

   <dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn>

   <dd>Enables display of discretionary ligatures (OpenType feature:
    <code>dlig</code>). Which ligatures are discretionary, or optional, is
    decided by the type designer so authors will need to refer to the
    documentation of a given font to understand which ligatures are
    considered discretionary.
  </dl>

  <div class=featex><img alt="discretionary ligature example" src=dlig.png></div>

  <dl>
   <dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn>

   <dd>Disables display of discretionary ligatures (OpenType feature:
    <code>dlig</code>).

   <dt><dfn id=historical-ligatures>historical-ligatures</dfn>

   <dd>Enables display of historical ligatures (OpenType feature:
    <code>hlig</code>).
  </dl>

  <div class=featex><img alt="historical ligature example" src=hlig.png></div>

  <dl>
   <dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn>

   <dd>Disables display of historical ligatures (OpenType feature:
    <code>hlig</code>).
  </dl>

  <p>Required ligatures, needed for correctly rendering complex scripts, are
   not affected by the settings above.</p>
  <!-- prop: font-variant-caps -->

  <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
   the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3>

  <table class=propdef id=namefont-variant-caps>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn>

    <tr>
     <td>Value:

     <td>normal | inherit | &lt;caps-value&gt;

    <tr>
     <td>Initial:

     <td>normal

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>Specifies control over capitalized forms.

  <pre
   class=prod><dfn id=ltcaps-valuegt><var>&lt;caps-value&gt;</var></dfn> = small-caps | all-small-caps | petite-caps | all-petite-caps | titling-caps | unicase</pre>

  <p>Individual values have the following meanings:

  <dl>
   <dt><dfn id=small-caps>small-caps</dfn>

   <dd>Enables display of small capitals (OpenType feature:
    <code>smcp</code>). Small-caps glyphs typically use the form of uppercase
    letters but are reduced to the size of lowercase letters.
  </dl>

  <div class=featex><img alt="small-caps example" src=smcp.png></div>

  <dl>
   <dt><dfn id=all-small-caps>all-small-caps</dfn>

   <dd>Enables display of small capitals for both upper and lowercase letters
    (OpenType features: <code>c2sc, smcp</code>).

   <dt><dfn id=petite-caps>petite-caps</dfn>

   <dd>Enables display of petite capitals (OpenType feature:
    <code>pcap</code>).

   <dt><dfn id=all-petite-caps>all-petite-caps</dfn>

   <dd>Enables display of petite capitals for both upper and lowercase
    letters (OpenType features: <code>c2pc, pcap</code>).

   <dt><dfn id=titling-caps>titling-caps</dfn>

   <dd>Enables display of titling capitals (OpenType feature:
    <code>titl</code>). Uppercase letter glyphs are often designed for use
    with lowercase letters. When used in all uppercase titling sequences they
    can appear too strong. Titling capitals are designed specifically for
    this situation.

   <dt><dfn id=unicase>unicase</dfn>

   <dd>Enables display of mixture of small capitals for uppercase letters
    with normal lowercase letters (OpenType feature: <code>unic</code>).
  </dl>

  <p>For backwards compatibility with CSS 2.1, if ‘<code class=property><a
   href="#small-caps">small-caps</a></code>’ or ‘<code class=property><a
   href="#all-small-caps">all-small-caps</a></code>’ is specified but
   small-caps glyphs are not available for a given font, user agents should
   simulate a small-caps font, for example by taking a normal font and
   replacing the lowercase letters by scaled uppercase characters (and also
   uppercase letters in the case of ‘<code class=property><a
   href="#all-small-caps">all-small-caps</a></code>’). As a last resort,
   unscaled uppercase letter glyphs in a normal font may replace glyphs in a
   small-caps font so that the text appears in all uppercase letters. If
   either ‘<code class=property><a
   href="#petite-caps">petite-caps</a></code>’ or ‘<code
   class=property><a href="#all-petite-caps">all-petite-caps</a></code>’ is
   specified for a font that doesn't support these features, the property
   behaves as if ‘<code class=property><a
   href="#small-caps">small-caps</a></code>’ or ‘<code class=property><a
   href="#all-small-caps">all-small-caps</a></code>’, respectively, had
   been specified. If ‘<code class=property><a
   href="#titling-caps">titling-caps</a></code>’ is specified with a font
   that does not support these features, this property has no visible effect.
   For scripts that lack uppercase and lowercase letters, ‘<code
   class=property><a href="#small-caps">small-caps</a></code>’, ‘<code
   class=property><a href="#all-small-caps">all-small-caps</a></code>’,
   ‘<code class=property><a href="#petite-caps">petite-caps</a></code>’,
   ‘<code class=property><a
   href="#all-petite-caps">all-petite-caps</a></code>’ and ‘<code
   class=property><a href="#unicase">unicase</a></code>’ have no visible
   effect.

  <div class=example>
   <p>Quotes rendered italicised, with small-caps on the first line:</p>

   <pre>blockquote            { font-style: italic; }
blockquote:first-line { font-variant: small-caps; }

&lt;blockquote><a href="http://lists.w3.org/Archives/Public/www-style/2009Dec/0036.html" style="text-decoration: none">I'll be honor-bound to slap them like a haddock.</a>&lt;/blockquote>
</pre>
  </div>

  <p>Insofar as this property causes text to be transformed to uppercase, the
   same considerations as for <span class=property>‘<code
   class=property>text-transform</code>’</span> apply.</p>
  <!-- prop: font-variant-numeric -->

  <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
   formatting: the <a
   href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3>

  <table class=propdef id=namefont-variant-numeric>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn>

    <tr>
     <td>Value:

     <td>normal | inherit | [ &lt;numeric-figure-values&gt; ||
      &lt;numeric-spacing-values&gt; || &lt;numeric-fraction-values&gt; ||
      slashed-zero ]

    <tr>
     <td>Initial:

     <td>normal

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>Specifies control over numerical forms.

  <pre
   class=prod><dfn id=ltnumeric-figure-valuesgt><var>&lt;numeric-figure-values&gt;</var></dfn>   = [ lining-nums | oldstyle-nums ]</pre>

  <pre
   class=prod><dfn id=ltnumeric-spacing-valuesgt><var>&lt;numeric-spacing-values&gt;</var></dfn>  = [ proportional-nums | tabular-nums ]</pre>

  <pre
   class=prod><dfn id=ltnumeric-fraction-valuesgt><var>&lt;numeric-fraction-values&gt;</var></dfn> = [ diagonal-fractions | stacked-fractions ]</pre>

  <p>Individual values have the following meanings:

  <dl>
   <dt><dfn id=lining-nums>lining-nums</dfn>

   <dd>Enables display of lining numerals (OpenType feature:
    <code>lnum</code>).

   <dt><dfn id=oldstyle-nums>oldstyle-nums</dfn>

   <dd>Enables display of old-style numerals (OpenType feature:
    <code>onum</code>).

   <dt><dfn id=proportional-nums>proportional-nums</dfn>

   <dd>Enables display of proportional numerals (OpenType feature:
    <code>pnum</code>).

   <dt><dfn id=tabular-nums>tabular-nums</dfn>

   <dd>Enables display of tabular numerals (OpenType feature:
    <code>tnum</code>).
  </dl>

  <p>The example below shows how these different properties can be combined
   to influence the rendering of tabular data with fonts that support these
   features. Within normal paragraph text, proportional numbers are used
   while tabular numbers are used so that columns of numbers line up
   properly:

  <div class=figure style="padding: 0; margin: auto;"><img alt="combining
   number styles" src=numberstyles.png>
   <p class=caption>Using number styles
  </div>

  <dl>
   <dt><dfn id=diagonal-fractions>diagonal-fractions</dfn>

   <dd>Enables display of lining diagonal fractions (OpenType feature:
    <code>frac</code>).
  </dl>

  <div class=featex><img alt="diagonal fraction example" src=frac.png></div>

  <dl>
   <dt><dfn id=stacked-fractions>stacked-fractions</dfn>

   <dd>Enables display of lining stacked fractions (OpenType feature:
    <code>afrc</code>).
  </dl>

  <div class=featex><img alt="stacked fraction example" src=afrc.png></div>

  <dl>
   <dt><dfn id=slashed-zero>slashed-zero</dfn>

   <dd>Enables display of slashed zeros (OpenType feature:
    <code>zero</code>).
  </dl>

  <div class=featex><img alt="slashed zero example" src=zero.png></div>

  <div class=example id=steak-marinade>
   <p>A simple flank steak marinade recipe, rendered with automatic fractions
    and old-style numerals:</p>

   <pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }

&lt;h4>Steak marinade:&lt;/h4>
&lt;ul>
  &lt;li>&lt;span class="amount">2&lt;/span> tbsp olive oil&lt;/li>
  &lt;li>&lt;span class="amount">1&lt;/span> tbsp lemon juice&lt;/li>
  &lt;li>&lt;span class="amount">1&lt;/span> tbsp soy sauce&lt;/li>
  &lt;li>&lt;span class="amount">1 1/2&lt;/span> tbsp dry minced onion&lt;/li>
  &lt;li>&lt;span class="amount">2 1/2&lt;/span> tsp italian seasoning&lt;/li>
  &lt;li>Salt &amp;amp; pepper&lt;/li>
&lt;/ul>

&lt;p>Mix the meat with the marinade and let it sit covered in the refrigerator for a few hours or overnight.&lt;/p>
</pre>
  </div>
  <!-- prop: font-variant-alternates -->

  <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates
   and swashes: the <a
   href="#propdef-font-variant-alternates">font-variant-alternates</a>
   property</h3>

  <table class=propdef id=namefont-variant-alternates>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn
      id=propdef-font-variant-alternates>font-variant-alternates</dfn>

    <tr>
     <td>Value:

     <td>normal | inherit | [ &lt;contextual-alt-values&gt; ||
      stylistic(&lt;feature-value-name&gt;) || historical-forms ||
      styleset(&lt;feature-value-name&gt; [, &lt;feature-value-name&gt;]*) ||
      character-variant(&lt;feature-value-name&gt;
      [,&lt;feature-value-name&gt;]*) || swash(&lt;feature-value-name&gt;) ||
      ornaments(&lt;feature-value-name&gt;) ||
      annotation(&lt;feature-value-name&gt;) || ruby ]

    <tr>
     <td>Initial:

     <td>normal

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <pre
   class=prod><dfn id=ltcontextual-alt-valuesgt><var>&lt;contextual-alt-values&gt;</var></dfn> = [ contextual | no-contextual ]</pre>

  <p>For any given character, fonts can provide a variety of alternate glyphs
   in addition to the default glyph for that character. This property
   provides control over the selection of these alternate glyphs.

  <p>In cases where multiple alternates are possible, authors define a
   <code><a
   href="#ltfeature-value-namegt">&lt;feature-value-name&gt;</a></code> using
   the <code>@font-feature-values</code> rule described below to indicate the
   specific alternate to be used. The nature of these alternates is font
   specific, so the rule defines values for a specific font family or set of
   families. When a particular value has not been defined for a given family,
   the named value is treated as if the feature had omitted from the style
   rule. If a given value is outside the range supported by a given font, the
   value is ignored. These values never apply to generic font families, nor
   to families selected as part of system font fallback. Values that behave
   this way are marked as <em>font specific</em>.

  <p>Individual values have the following meanings:

  <dl>
   <dt><dfn
    id=stylisticltfeature-value-namegt>stylistic(&lt;feature-value-name&gt;)</dfn>
    

   <dd>Enables display of stylistic alternates (<em>font specific</em>,
    OpenType feature: <code>salt &lt;feature-value-name&gt;</code>).
  </dl>

  <div class=featex><img alt="stylistic alternate example" src=salt.png></div>

  <dl>
   <dt><dfn id=contextual>contextual</dfn>

   <dd>Enables display of contextual alternates (OpenType feature:
    <code>calt, clig</code>).
  </dl>

  <div class=featex><img alt="contextual alternate example" src=calt.png></div>

  <dl>
   <dt><dfn id=no-contextual>no-contextual</dfn>

   <dd>Disables display of contextual alternates (OpenType feature:
    <code>calt, clig</code>).

   <dt><dfn id=historical-forms>historical-forms</dfn>

   <dd>Enables display of historical forms (OpenType feature:
    <code>hist</code>).
  </dl>

  <div class=featex><img alt="historical form example" src=hist.png></div>

  <dl>
   <dt><dfn
    id=stylesetltfeature-value-namegt>styleset(&lt;feature-value-name&gt;
    [,&lt;feature-value-name&gt;]*)</dfn>

   <dd>Enables display with stylistic sets (<em>font specific</em>, OpenType
    feature: <code>ss&lt;feature-index&gt;</code> OpenType currently defines
    <code>ss01</code> through <code>ss20</code>).
  </dl>

  <div class=featex><img alt="styleset example" src=ssnn.png></div>

  <dl>
   <dt><dfn
    id=character-variantltfeature-value-namegt>character-variant(&lt;feature-value-name&gt;
    [,&lt;feature-value-name&gt;]*)</dfn>

   <dd>Enables display of specific character variants (<em>font
    specific</em>, OpenType feature: <code>cv&lt;feature-index&gt;</code>
    OpenType currently defines <code>cv01</code> through <code>cv99</code>).

   <dt><dfn
    id=swashltfeature-value-namegt>swash(&lt;feature-value-name&gt;)</dfn>

   <dd>Enables display of swash glyphs (<em>font specific</em>, OpenType
    feature: <code>swsh &lt;feature-index&gt;, cswh
    &lt;feature-index&gt;</code>).
  </dl>

  <div class=featex><img alt="swash example" src=swsh.png></div>

  <dl>
   <dt><dfn
    id=ornamentsltfeature-value-namegt>ornaments(&lt;feature-value-name&gt;)</dfn>
    

   <dd>Enables replacement of default glyphs with ornaments, if provided in
    the font (<em>font specific</em>, OpenType feature: <code>ornm
    &lt;feature-index&gt;</code>). Some fonts may offer ornament glyphs as
    alternates for a wide collection of characters; however, displaying
    arbitrary characters (e.g., alphanumerics) as ornaments is poor practice
    as it distorts the semantics of the data. Font designers are encouraged
    to encode all ornaments (except those explicitly encoded in the Unicode
    Dingbats blocks, etc.) as alternates for the bullet character (U+2022) to
    allow authors to select the desired glyph using
    &lt;feature-value-name&gt;.
  </dl>

  <div class=featex><img alt="ornaments example" src=ornm.png></div>

  <dl>
   <dt><dfn
    id=annotationltfeature-value-namegt>annotation(&lt;feature-value-name&gt;)</dfn>
    

   <dd>Enables display of alternate annotation forms (<em>font specific</em>,
    OpenType feature: <code>nalt &lt;feature-index&gt;</code>).
  </dl>

  <div class=featex><img alt="alternate annotation form example"
   src=nalt.png></div>

  <dl>
   <dt><dfn id=ruby>ruby</dfn>

   <dd>Enables display of ruby variant glyphs (OpenType feature:
    <code>ruby</code>). This value only selects a glyph for use in ruby text,
    it does not affect font scaling. The red ruby text below is shown with
    default glyphs (top) and with ruby variant glyphs (bottom). Note the
    slight difference in stroke thickness.
  </dl>

  <div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div>

  <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font
   specific alternates: the @font-feature-values rule</h3>

  <p>Several of the possible values of ‘<code class=property><a
   href="#propdef-font-variant-alternates">font-variant-alternates</a></code>’
   listed above are labeled as "font specific". For these features fonts may
   define not just a single glyph but a set of alternate glyphs with an index
   to select a given alternate. Since these are font family specific, the
   @font-feature-values rule is used to define named-values for these indices
   for a given family.

  <p>In the case of the swash Q in the example shown above, the swash could
   be specified using these style rules:

  <pre>
@font-feature-values Jupiter Sans {
  @swash delicate 1, flowing 2;
}

h2 { font-family: Jupiter Sans, sans-serif; }

/* show the second swash variant in h2 headings */
h2:first-letter { font-variant-alternates: swash(flowing); }

&lt;h2>Quick&lt;/h2></pre>

  <p>When Jupiter Sans is present, the second alternate swash alternate will
   be displayed. When not present, no swash character will be shown, since
   the specific named-value "flowing" is only defined for the Jupiter Sans
   family. The @-mark indicates the name of the property value for which a
   named-value can be used. The name "flowing" is chosen by the author.

  <p>The syntax of the @font-feature-values rule is defined as:

  <pre>
@font-feature-values &lt;font-family> [, &lt;font-family>]* {
  &lt;font-variant-value-definition&gt;;
  &lt;font-variant-value-definition&gt;;
     .
     .
}
</pre>

  <p>where:

  <pre
   class=prod><dfn id=ltfont-variant-value-definitiongt><var>&lt;font-variant-value-definition&gt;</var></dfn> = @&lt;font-variant-value> &lt;feature-value-list> [, &lt;feature-value-list>]*</pre>

  <pre
   class=prod><dfn id=ltfont-familygt><var>&lt;font-family&gt;</var></dfn>                   = font family name, quoted or unquoted, using the same quoting rules that apply within style rules</pre>

  <pre
   class=prod><dfn id=ltfont-variant-valuegt><var>&lt;font-variant-value&gt;</var></dfn>            = the name of one of the font-specific font-variant values (e.g. swash, styleset, annotation)</pre>

  <pre
   class=prod><dfn id=ltfeature-value-listgt><var>&lt;feature-value-list&gt;</var></dfn>            = &lt;feature-value-name> &lt;feature-index>+</pre>

  <pre
   class=prod><dfn id=ltfeature-value-namegt><var>&lt;feature-value-name&gt;</var></dfn>            = a user-defined identifier used to describe the index</pre>

  <pre
   class=prod><dfn id=ltfeature-indexgt><var>&lt;feature-index&gt;</var></dfn>                 = an integer value greater than 0 specific to a given font or set of fonts</pre>

  <p>These @font-feature-values rules can appear anywhere within a stylesheet
   and are exposed bidirectionally across @import boundaries. If multiple
   @font-feature-values rules are defined for a given family, the resulting
   values defined are the union of these rules. This allows a set of
   named-values to be defined for a given font family globally for a site and
   specific additions made per-page. If the same &lt;feature-value-name&gt;
   is defined mulitple times for a given font-variant value, the last defined
   value is used.

  <pre>
site.css:

  @font-feature-values Mercury Serif {
    @styleset stacked-g 3, stacked-a 4; /* "two-storey" versions of g, a */
  }

page.css:
  
  @font-feature-values Mercury Serif {
    @styleset geometric-m 7; /* alternate version of m */
  }
  
  body {
    font-family: Mercury Serif, serif;

    /* enable both the use of stacked g and alternate m */
    font-variant-alternates: styleset(stacked-g, geometric-m);
  }</pre>

  <p>Only named font families are allowed for &lt;font-family&gt;, rules
   defined for generic and system fonts must be ignored. However, if a user
   agent defines a generic font to be a specific named font (e.g. Helvetica),
   the settings associated with that family name will be used.

  <p>For font-variant-value, only font-specific value names supported by the
   ‘<code class=property><a
   href="#propdef-font-variant">font-variant</a></code>’ property are
   recognized, definitions for other value names are a syntax error and
   ignored. Each value that is font specific is clearly marked as such.
   Feature value names follow the rules of CSS identifiers and are unique
   only for a given set of font families and font variant value; the same
   identifier used with a different font variant value is treated as a
   distinct value.

  <p>Using a commonly named value allows authors to use a single style rule
   to cover a set of fonts for which the underlying selector is different for
   each font. If either font in the example below is found, a circled number
   glyph will be used:

  <pre>@font-feature-values Taisho Gothic {
  @annotation boxed 1, circled 4;
}

@font-feature-values Otaru Kisa {
  @annotation circled 1, black-boxed 3;
}

h3.title {
  /* circled form defined for both fonts */
  font-family: Taisho Gothic, Otaru Kisa;
  font-variant: annotation(circled);
}</pre>

  <p>Most font-specific font-variant values take a single value (e.g. swash).
   If multiple values are assigned to a given name a syntax error occurs and
   the entire &lt;font-variant-value-definition&gt; is ignored. For the
   styleset value, multiple values can be assigned to a given name. Multiple
   values indicate the style sets to be enabled. Values between 1 and 20
   enable OpenType features ‘<code class=css>ss01</code>’ through
   ‘<code class=css>ss20</code>’. Values greater than 20 are ignored.

  <pre>@font-feature-values Mars Serif {
  @styleset alt-g 1,        /* implies ss01 = 1 */
            curly-quotes 3, /* implies ss03 = 1 */
            code 4 5;       /* implies ss04 = 1, ss05 = 1 */
}

p.codeblock {
  /* implies ss03 = 1, ss04 = 1, ss05 = 1 */
  font-variant-alternates: styleset(curly-quotes, code);
}</pre>

  <p>For character-variant, a single value between 1 and 99 indicates the
   enabling of OpenType feature ‘<code class=css>cv01</code>’ through
   ‘<code class=css>cv99</code>’. Values greater than 99 are ignored.
   When two values are listed, the first value indicates the feature used and
   the second the value passed for that feature. Values beyond the first two
   are ignored.

  <pre>@font-feature-values MM Greek {
  @character-variant alpha-2 1 2;  /* implies cv01 = 2 */
  @character-variant beta-3 2 3;   /* implies cv02 = 3 */
  @character-variant gamma 12;     /* implies cv12 = 1 */
  @character-variant zeta 20 3 2;  /* implies cv20 = 3, '2' is ignored */
  @character-variant silly 105;    /* &gt;99, ignored */
  @character-variant dumb 323 3;   /* &gt;99, ignored */
}

#title {
  /* use the third alternate beta, first alternate gamma */
  font-variant-alternates: character-variant(beta-3, gamma);
}</pre>

  <p>See <a href="#font-feature-values-DOM">Appendix C</a> for a description
   of the interfaces used to modify these rules via the CSS Object Model.

  <div class=figure><img alt="Matching text on Byzantine seals using
   character variants" src=byzantineseal.png>
   <p class=caption>Byzantine seal text displayed with character variants
  </div>

  <div class=example>
   <p>In the figure above, the text in red is rendered using a font
    containing character variants that mimic the character forms found on a
    Byzantine seal from the 8th century A.D. Two lines below is the same text
    displayed in a font without variants. Note the two variants for U and N
    used on the seal.</p>

   <pre>@font-feature-values Athena Ruby {
  @character-variant
    leo-B 2 1, leo-M 13 3, 
    leo-alt-N 14 1, leo-N 14 2,
    leo-T 20 1, 
    leo-U 21 2, leo-alt-U 21 4;
}

p {
  font-variant: discretionary-ligatures, character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
}

span.alt-N { 
  font-variant-alternates: character-variant(leo-alt-N);
}

span.alt-U {
  font-variant-alternates: character-variant(leo-alt-U);
}

&lt;p>ENO....UP͞RSTU&lt;span class="alt-U">U&lt;/span>͞&lt;span class="alt-U">U&lt;/span>ΚΑΙTỤẠG̣IUPNS&lt;/p>

&lt;p>LEON|ΚΑΙCONSTA|NTI&lt;span class="alt-N">N&lt;/span>OS..|STOIBAṢ.|LIṢROM|AIO&lt;span class="alt-N">N&lt;/span>&lt;/p> 
</pre>
  </div>

  <h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East
   Asian text rendering: the <a
   href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
   property</h3>

  <table class=propdef id=namefont-variant-east-asian>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn
      id=propdef-font-variant-east-asian>font-variant-east-asian</dfn>

    <tr>
     <td>Value:

     <td>normal | inherit | [ &lt;east-asian-variant-values&gt; ||
      &lt;east-asian-width-values&gt; ]

    <tr>
     <td>Initial:

     <td>normal

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>Allows control of glyph substitute and positioning in East Asian text.
   In cases where multiple alternates are possible, an integer is included to
   indicate the index of the alternate to be used. Omitting the integer
   indicates the first alternate.

  <pre
   class=prod><dfn id=lteast-asian-variant-valuesgt><var>&lt;east-asian-variant-values&gt;</var></dfn> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]</pre>

  <pre
   class=prod><dfn id=lteast-asian-width-valuesgt><var>&lt;east-asian-width-values&gt;</var></dfn>   = [ full-width | proportional-width ]</pre>

  <p>Individual values have the following meanings:

  <dl>
   <dt><dfn id=jis78>jis78</dfn>

   <dd>Enables rendering of JIS78 forms (OpenType feature:
    <code>jp78</code>).
  </dl>

  <div class=featex><img alt="JIS78 form example" src=jp78.png></div>

  <dl>
   <dt><dfn id=jis83>jis83</dfn>

   <dd>Enables rendering of JIS83 forms (OpenType feature:
    <code>jp83</code>).

   <dt><dfn id=jis90>jis90</dfn>

   <dd>Enables rendering of JIS90 forms (OpenType feature:
    <code>jp90</code>).

   <dt><dfn id=jis04>jis04</dfn>

   <dd>Enables rendering of JIS2004 forms (OpenType feature:
    <code>jp04</code>).

   <dt><dfn id=simplified>simplified</dfn>

   <dd>Enables rendering of simplified forms (OpenType feature:
    <code>smpl</code>).

   <dt><dfn id=traditional>traditional</dfn>

   <dd>Enables rendering of traditional forms (OpenType feature:
    <code>trad</code>).
  </dl>

  <div class=featex><img alt="tradtional form example" src=trad.png></div>

  <dl>
   <dt><dfn id=full-width>full-width</dfn>

   <dd>Enables rendering of full-width variants (OpenType feature:
    <code>fwid</code>).

   <dt><dfn id=proportional-width>proportional-width</dfn>

   <dd>Enables rendering of proportionally-spaced variants (OpenType feature:
    <code>pwid</code>).
  </dl>

  <div class=featex><img alt="proportionally spaced Japanese example"
   src=pwid.png></div>

  <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
   for font rendering: the <a href="#propdef-font-variant">font-variant</a>
   property</h3>

  <table class=propdef id=namefont-variant>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-variant>font-variant</dfn>

    <tr>
     <td>Value:

     <td>normal | inherit | [ &lt;common-lig-values&gt; ||
      &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
      &lt;contextual-alt-values&gt; || stylistic(&lt;feature-value-name&gt;)
      || historical-forms || styleset(&lt;feature-value-name&gt; [,
      &lt;feature-value-name&gt;]*) ||
      character-variant(&lt;feature-value-name&gt;
      [,&lt;feature-value-name&gt;]*) || swash(&lt;feature-value-name&gt;) ||
      ornaments(&lt;feature-value-name&gt;) ||
      annotation(&lt;feature-value-name&gt;) || ruby || &lt;caps-value&gt; ||
      &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
      &lt;numeric-fraction-values&gt; || slashed-zero ||
      &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ]

    <tr>
     <td>Initial:

     <td>normal

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>The value ‘<code class=property>normal</code>’ resets all other font
   feature properties to normal and font defaults are used when rendering
   text. Like other shorthands, using ‘<code class=property><a
   href="#propdef-font-variant">font-variant</a></code>’ resets all font
   feature properties to their initial values. It does not reset the values
   of either ‘<code class=property><a
   href="#propdef-font-language-override">font-language-override</a></code>’
   or ‘<code class=property><a
   href="#propdef-font-feature-settings">font-feature-settings</a></code>’.

  <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
   font feature settings control: the <a
   href="#propdef-font-feature-settings">font-feature-settings</a> property</h3>

  <table class=propdef id=namefont-feature-settings>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-feature-settings>font-feature-settings</dfn>

    <tr>
     <td>Value:

     <td>normal | &lt;feature-tag-value&gt; [, &lt;feature-tag-value&gt;]*

    <tr>
     <td>Initial:

     <td>normal

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>This property provides low-level control over OpenType font features. It
   is intended as a way of providing access to font features that are not
   widely used but are needed for a particular use case. A value of ‘<code
   class=property>normal</code>’ means that no change in glyph selection or
   positioning occurs due to this property.

  <p>

  <pre>/* enable small caps and use second swash alternate */
font-feature-settings: "smcp", "swsh" 2;</pre>

  <p>Feature tag values have the following syntax:

  <pre
   class=prod><dfn id=ltfeature-tag-valuegt><var>&lt;feature-tag-value&gt;</var></dfn> = &lt;string&gt; [ &lt;integer&gt; | on | off ]?</pre>

  <p>The &lt;string&gt; is a case-sensitive OpenType feature tag. For it to
   match an OpenType feature contained in a font, it must follow the syntax
   rules for tags. As specified in the OpenType specification, feature tags
   contain four characters. Tag strings longer than four characters must be
   ignored, user agents must not use a feature tag created by truncating the
   string to four characters. Feature tags need only match a feature tag
   defined in the font, they are not limited to explicitly registered
   OpenType features. Fonts defining custom feature tags should follow the <a
   href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name
   rules</a> defined in the OpenType specification <a
   href="#OPENTYPE-FEATURES"
   rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>.
   Feature tags not present in the font are ignored; a user agent must not
   attempt to synthesize fallback behavior based on these feature tags.

  <p>If present, a value indicates an index used for glyph selection. An
   &lt;integer&gt; value must be 0 or greater. A value of 0 indicates that
   the feature is disabled. For boolean features, a value of 1 enables the
   feature. For non-boolean features, a value of 1 or greater enables the
   feature and indicates the feature selection index. A value of ‘<code
   class=property>on</code>’ is synonymous with 1 and ‘<code
   class=property>off</code>’ is synonymous with 0. If the value is
   omitted, a value of 1 is assumed.

  <pre>
font-feature-settings: "dlig" 1;       /* dlig=1 enable discretionary ligatures */
font-feature-settings: "smcp" on;      /* smcp=1 enable small caps */
font-feature-settings: 'c2sc';         /* c2sc=1 enable caps to small caps */
font-feature-settings: "liga" off;     /* liga=0 no common ligatures */
font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
font-feature-settings: "palin" off;    /* good idea but invalid tagname, ignored */
font-feature-settings: "PKRN";         /* PKRN=1 enable custom feature */
</pre>

  <p>Authors should generally use ‘<code class=property><a
   href="#propdef-font-variant">font-variant</a></code>’ and its related
   subproperties whenever possible and only use this property for special
   cases where its use is the only way of accessing a particular infrequently
   used font feature.

  <p>Although specifically defined for OpenType feature tags, feature tags
   for other modern font formats that support font features may be added in
   the future.

  <p class=issue>While the use of quotes distinguishes feature tags as
   defined in an external resource, they still seem a bit clumsy.

  <div class=example>
   <p>The Japanese text below will be rendered with half-width kana
    characters:</p>

   <pre lang=ja>
body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }

&lt;p>毎日<a href="http://images.google.com/images?q=%E3%82%AB%E3%83%AC%E3%83%BC" style="text-decoration: none;">カレー</a>食べてるのに、飽きない&lt;/p>
</pre>
  </div>

  <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font
   language override: the <a
   href="#propdef-font-language-override">font-language-override</a> property</h3>

  <table class=propdef id=namefont-language-override>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=propdef-font-language-override>font-language-override</dfn>

    <tr>
     <td>Value:

     <td>normal | inherit | &lt;string&gt;

    <tr>
     <td>Initial:

     <td>normal

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>The value of ‘<code class=property>normal</code>’ implies that when
   rendering with OpenType fonts the language of the document is used to
   infer the OpenType language system, used to select language specific
   features when rendering. The value of the &lt;string&gt; is a single
   three-letter OpenType <a
   href="http://www.microsoft.com/typography/otspec/languagetags.htm">language
   system tag</a>, defined in the layout tag registry of the OpenType
   specification.

  <div class=example>
   <p>The <a
    href="http://www.ohchr.org/EN/UDHR/Pages/Introduction.aspx">Universal
    Declaration of Human Rights</a> has been translated into a wide variety
    of languages. In Turkish, Article 9 of this document might be marked up
    as below:</p>

   <pre lang=tr>&lt;body lang="tr">

&lt;h4>Madde 9&lt;/h4>
&lt;p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.&lt;/p>
</pre>

   <p>Here the user agent uses the value of the ‘<code
    class=property>lang</code>’ attribute when rendering text and
    appropriately renders this text without ‘<code
    class=property>fi</code>’ ligatures. There is no need to use the
    ‘<code class=property><a
    href="#propdef-font-language-override">font-language-override</a></code>’
    property.</p>

   <p>However, a given font may lack support for a specific language. In this
    situation authors may need to use the typographic conventions of a
    related language that are supported by that font:</p>

   <pre lang=mk>&lt;body lang="mk">     &lt;!-- Macedonian lang code --&gt;

body { font-language-override: "SRB"; /* Serbian OpenType language tag */ }

&lt;h4>Члeн 9&lt;/h4>
&lt;p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.&lt;/p>

</pre>

   <p>The Macedonian text here will be rendered using Serbian typographic
    conventions, with the assumption that the font specified supports
    Serbian.</p>
  </div>

  <h2 id=rendering-considerations><span class=secno>7 </span>Resolving font
   feature settings</h2>

  <p>General and font-specific font feature property settings are resolved in
   the order below, in low to high precedence. This ordering is used to
   construct a combined list of font features that affect a given text run.
   These features are applied on top of layout engine defaults.

  <ol>
   <li>If the font is defined via an @font-face rule, the font features
    implied by the font-variant descriptor in the @font-face rule.

   <li>If the font is defined via an @font-face rule, the font features
    implied by the font-feature-settings descriptor in the @font-face rule.

   <li>Font features implied by the value of the ‘<code class=property><a
    href="#propdef-font-variant">font-variant</a></code>’ property, the
    related font-variant subproperties and any other CSS property that may
    use OpenType features (e.g. the ‘<code class=property><a
    href="#propdef-font-kerning">font-kerning</a></code>’ property).

   <li>Font features implied by the value of ‘<code class=property><a
    href="#propdef-font-feature-settings">font-feature-settings</a></code>’
    property.
  </ol>

  <p>This ordering allows authors to set up a general set of defaults for
   fonts within their @font-face rules, then override them with property
   settings for specific elements. General property settings override the
   settings in @font-face rules and low-level font feature settings override
   ‘<code class=property><a
   href="#propdef-font-variant">font-variant</a></code>’ property settings.
   

  <p>For situations where the combined list of font feature settings contains
   more than one value for the same feature, the last value is used. When a
   font lacks support for a given underlying font feature, text is simply
   rendered as if that font feature was not enabled; font fallback does not
   occur and no attempt is made to synthesize the feature except where
   explicitly noted for specific properties.

  <div class=example>
   <p>With the styles below, numbers are rendered proportionally when used
    within a paragraph but are shown in tabular form within tables of prices:</p>

   <pre>body { 
  font-variant-numeric: proportional-nums; 
}

table.prices td {
  font-variant-numeric: tabular-nums; 
}
</pre>
  </div>

  <div class=example>
   <p>When the font-variant descriptor is used within an @font-face rule, it
    only applies to the font defined by that rule.</p>

   <pre>@font-face {
  font-family: MainText;
  src: url(http://example.com/font.ttf);
  font-variant: oldstyle-nums proportional-nums styleset(1,3);
}

body {
  font-family: MainText, Helvetica;
}

table.prices td {
  font-variant-numeric: tabular-nums; 
}
</pre>

   <p>In this case, old-style numerals will be used throughout but only where
    the font "MainText" is used. Just as in the previous example, tabular
    values will be used in price tables since ‘<code class=property><a
    href="#tabular-nums">tabular-nums</a></code>’ appears in a general
    style rule and its use is mutually exclusive with ‘<code
    class=property><a
    href="#proportional-nums">proportional-nums</a></code>’. Stylistic
    alternate sets will only be used where MainText is used.</p>
  </div>

  <div class=example>
   <p>The @font-face rule can also be used to access font features in locally
    available fonts via the use of local() in the ‘<code class=property><a
    href="#descdef-src">src</a></code>’ descriptor of the @font-face
    definition:</p>

   <pre>@font-face {
  font-family: BodyText;
  src: local("HiraMaruPro-W4");
  font-variant: proportional-width;
  font-feature-settings: "ital"; /* Latin italics within CJK text feature */
}

body { font-family: BodyText, serif; }
</pre>

   <p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When
    text rendering occurs, Japanese kana will be proportionally spaced and
    Latin text will be italicised. Text rendered with the fallback serif font
    will use default rendering properties.</p>
  </div>

  <div class=example>
   <p>In the example below, discretionary ligatures are enabled only for a
    downloadable font but are disabled within spans of class "special":</p>

   <pre>@font-face {
  font-family: main;
  src: url(fonts/ffmeta.woff) format("woff");
  font-variant: discretionary-ligatures;
}

body         { font-family: main, Helvetica; }
span.special { font-variant-ligatures: no-discretionary-ligatures; }
</pre>

   <p>Adding an discretionary style rule with the @font-face above:</p>

   <pre>body         { font-family: main, Helvetica; }
span         { font-feature-settings: "dlig"; }
span.special { font-variant-ligatures: no-discretionary-ligatures; }
</pre>

   <p>Within spans of class "special", discretionary ligatures <em>will</em>
    be rendered. This is because both the ‘<code class=property><a
    href="#propdef-font-feature-settings">font-feature-settings</a></code>’
    and ‘<code class=property><a
    href="#propdef-font-variant-ligatures">font-variant-ligatures</a></code>’
    properties apply to these spans. Although the ‘<code
    class=css>no-discretionary ligatures</code>’ setting of ‘<code
    class=property><a
    href="#propdef-font-variant-ligatures">font-variant-ligatures</a></code>’
    effectively disables the OpenType <code>dlig</code> feature, because the
    ‘<code class=property><a
    href="#propdef-font-feature-settings">font-feature-settings</a></code>’
    is resolved after that, the ‘<code class=property>dlig</code>’ value
    reenables discretionary ligatures.</p>
  </div>
  <!-- simple example of using both font-variant subproperty and descriptor value -->
  <!-- example showing conflicting values and how they are resolved -->

  <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font
   properties to CSS properties</h2>

  <p><em>This appendix is included as background for some of the problems and
   situations that are described in other sections. It should be viewed as
   informative only.</em>

  <p>Font properties in CSS are designed to be independent of the underlying
   font formats used; they can be used to specify bitmap fonts, Type1 fonts,
   SVG fonts in addition to the common TrueType and OpenType fonts. But there
   are facets of the TrueType and OpenType formats that often cause confusion
   for authors and present challenges to implementers on different platforms.
   

  <p>Originally developed at Apple, TrueType was designed as an outline font
   format for both screen and print. Microsoft joined Apple in developing the
   TrueType format and both platforms have supported TrueType fonts since
   then. Font data in the TrueType format consists of a set of tables
   distinguished with common four-letter tag names, each containing a
   specific type of data. For example, naming information, including
   copyright and license information, is stored in the ‘<code
   class=property>name</code>’ table. The character map (‘<code
   class=property>cmap</code>’) table contains a mapping of character
   encodings to glyphs. Apple later added additional tables for supporting
   enhanced typographic functionality; these are now called Apple Advanced
   Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of
   tables for advanced typography and called their format OpenType <a
   href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>.

  <p>In many cases the font data used under Microsoft Windows or Linux is
   slightly different from the data used under Apple's Mac OS X because the
   TrueType format allowed for variation across platforms. This includes font
   metrics, names and character map data.

  <p>Font family names for TrueType and OpenType fonts are contained in the
   ‘<code class=property>name</code>’ table, in name records with name ID
   1. Mulitple names can be stored for different locales but Microsoft
   recommends fonts always include at least a US English version of the name.
   On Windows, the family name can only be used for a maximum of four faces;
   for larger groupings the "preferred family" (name ID 16) or "WWS family"
   (name ID 21) can be used. The full font name (name ID 4) and the
   Postscript name (name ID 6) describe a single face uniquely. The bold face
   of the Gill Sans family has a fullname of "Gill Sans Bold" and a
   Postscript name of "GillSans-Bold". There can be multiple localized
   versions of the fullname for a given face but the Postscript name is
   always a unique name made from a limited set of ASCII characters.

  <p>On various platforms, different names are used to search for a font. For
   example, with the Windows GDI CreateIndirectFont API, either a family or
   fullname can be used to lookup a face while on Mac OS X the
   ATSFontFindFromName and ATSFontFindFromPostScriptName API calls are used
   to lookup a given face using the fullname and Postscript name. Under
   Linux, the fontconfig API allows fonts to be searched using any of these
   names. In situations where platform API's automatically substitute other
   font choices, it may be necessary to verify a returned font matches a
   given name.

  <p>The weight of a given face can be determined via the usWeightClass field
   of the OS/2 table or inferred from the style name (name ID 2). Likewise,
   the width can be determined via the usWidthClass of the OS/2 table or
   inferred from the style name. For historical reasons, font designers have
   sometimes skewed values in the OS/2 table to work around problems in the
   Windows GDI API.

  <p>Rendering complex scripts that use contextual shaping such as Thai,
   Arabic and Devanagari requires features present only in OpenType or AAT
   fonts. Currently, complex script rendering is supported on Windows and
   Linux using OpenType font features while AAT font features are used under
   Mac OS X. Apple has indicated it intends to support complex script
   rendering using OpenType font features in the future.

  <p class=issue>Need to define normatively how WWS names are handled across
   platforms.

  <h2 class=no-num id=font-licensing>Appendix B: Font licensing issues</h2>

  <p><em>This appendix is informative only.</em>

  <p>The use of fonts on the web is often surrounded in controversy. Font
   designers expend huge amounts of effort to create their designs,
   painstakingly refining letterforms and tuning font data to assure that the
   letterforms appear as desired both in print and on the screen. As a result
   they often license their fonts very carefully, often with somewhat complex
   terms. Authors who want to use specific fonts via a downloadable font
   mechanism must always carefully verify that their intended use is within
   the scope of the font license. Many commercial fonts presently do not
   allow web downloading of their fonts in any form. Font formats often store
   references to the font license within the font data itself. When in doubt,
   it is best to verify with the font designer directly. Vendors that bundle
   fonts with their products are also strongly encouraged to carefully
   explain the license details that covers the fonts they bundle.

  <div class=example>
   <p>An author would like to use <a
    href="http://www.typography.com/fonts/font_overview.php?productLineID=
    100008">Gotham</a>, a font designed by Hoefler & Frere-Jones, as a
    downloadable font for their webpages. But the <a
    href="http://www.typography.com/home/eula.php">end-user license
    agreement</a> that covers Gotham specifically notes that usage via
    @font-face rules in CSS style sheets is not allowed. The author cannot
    link to this font in their web pages.</p>
  </div>

  <div class=example>
   <p>An author wants to use <a
    href="http://scripts.sil.org/gentium">Gentium</a>, a font developed by
    SIL International. This font is licensed under the terms of the <a
    href="http://scripts.sil.org/ofl">Open Font License</a>, so as long as
    the author follows the relatively liberal terms of this license, they can
    use Gentium as a downloadable font for their web pages.</p>
  </div>

  <h2 class=no-num id=font-feature-values-DOM>Appendix C: DOM Interfaces</h2>

  <p><em>This appendix is normative.</em>

  <p>Font feature values defined within <code>@font-feature-values</code>
   rules are accessible via the following modifications to the CSS Object
   Model.

  <dl>
   <dt><b>Interface <i><a id=DOM-CSSRule name=DOM-CSSRule>CSSRule</a></i></b>

   <dd>
    <p>The following additional rule type is added to the
     <code>CSSRule</code> interface.</p>

    <dl>
     <dt><b>IDL Definition</b>

     <dd>
      <div class=idl-code>
       <pre>
interface CSSRule {
...
const unsigned short FONT_FEATURE_VALUES_RULE = 11;
...
};</pre>
      </div>
     </dd>
     <!-- IDL -->
    </dl>

   <dt><b>Interface <i><a id=DOM-CSSFontFeatureValuesRule
    name=DOM-CSSFontFeatureValuesRule>CSSFontFeatureValuesRule</a></i></b>

   <dd>
    <p> The <code>CSSFontFeatureValuesRule</code> interface represents font
     feature selector values for a given set of font families.</p>

    <dl>
     <dt> <br>
      <b>IDL Definition</b>

     <dd>
      <div class=idl-code>
       <pre>
interface CSSFontFeatureValuesRule : CSSRule {
  attribute DOMString fontFamily;
                        // raises(DOMException) on setting
  attribute DOMString valueText;
                        // raises(DOMException) on setting
};
</pre>
      </div>
      <br>

     <dt><b>Attributes</b>

     <dd>
      <dl>
       <dt><code class=attribute-name><a
        id=DOM-CSSFontFeatureValuesRule-fontFamily
        name=DOM-CSSFontFeatureValuesRule-fontFamily>fontFamily</a></code> of
        type <code>DOMString</code>

       <dd>This attribute represents the list of font families for which a
        particular set of values are defined. The syntax is the same as that
        of the font-family property.
      </dl>

     <dd>
      <dl>
       <dt><code class=attribute-name><a
        id=DOM-CSSFontFeatureValuesRule-valueText
        name=DOM-CSSFontFeatureValuesRule-valueText>valueText</a></code> of
        type <code>DOMString</code>

       <dd>Parsable text representing the set of feature values defined for a
        given set of font families.
      </dl>

     <dt><b>Exceptions on setting</b>
    </dl>

    <dl>
     <dt><code>DOMException SYNTAX_ERR</code>

     <dd>Thrown when the specified string value has a syntax error or is
      unparsable.
    </dl>

   <dt><b>No Methods</b>
  </dl>

  <h2 class=no-num id=ch-ch-ch-changes>Changes</h2>

  <h3 class=no-num id=recent-changes> Changes from the <a
   href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324/">March 2011 CSS3
   Fonts Working Draft</a></h3>

  <p>Major changes include:

  <ul>
   <li>Made same-origin wording normative and marked it at-risk

   <li>Simplified definition of subscript/superscript variant property

   <li>Trimmed some font-variant property values and renamed others

   <li>Added more examples for various font variant value types

   <li>Added DOM interface definitions for @font-feature-values rules
  </ul>

  <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

  <p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all
   their help and feedback. John Hudson was kind enough to take the time to
   explain the subtleties of OpenType language tags and provided the example
   of character variant usage for displaying text on Byzantine seals. Ken
   Lunde and Eric Muller provided valuable feedback on CJK OpenType features
   and Unicode variation selectors. The idea for supporting font features by
   using font-variant subproperties originated with Håkon Wium Lie, Adam
   Twardoch and Tal Leming. Thanks also to House Industries for allowing the
   use of Ed Interlock in the discretionary ligatures example.

  <p>A special thanks to Robert Bringhurst for the sublime mind expansion
   that is <em>The Elements of Typographic Style</em>.

  <h2 class=no-num id=references>References</h2>

  <h3 class=no-num id=normative-references>Normative References</h3>
  <!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CHARMOD>[CHARMOD]

   <dd>Martin J. Dürst; et al. <a
    href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character
    Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February
    2005. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a>
    </dd>
   <!---->

   <dt id=CORS>[CORS]

   <dd>Anne van Kesteren. <a
    href="http://www.w3.org/TR/2010/WD-cors-20100727/"><cite>Cross-Origin
    Resource Sharing.</cite></a> 27 July 2010. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2010/WD-cors-20100727/">http://www.w3.org/TR/2010/WD-cors-20100727/</a>
    </dd>
   <!---->

   <dt id=CSS21>[CSS21]

   <dd>Bert Bos; et al. <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
    Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
    2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
    </dd>
   <!---->

   <dt id=HTML5>[HTML5]

   <dd>Ian Hickson. <a
    href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a>
    25 May 2011. W3C Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a>
    </dd>
   <!---->

   <dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT]

   <dd><a
    href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip"><cite>Information
    technology — Coding of audio-visual objects — Part 22: Open Font
    Format.</cite></a> International Organization for Standardization.
    ISO/IEC 14496-22:2009. URL: <a
    href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip">http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip</a>
    </dd>
   <!---->

   <dt id=OPENTYPE>[OPENTYPE]

   <dd><a
    href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType
    specification.</cite></a> Microsoft. URL: <a
    href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a>
    </dd>
   <!---->

   <dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES]

   <dd><a
    href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType
    feature registry.</cite></a> Microsoft. URL: <a
    href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a>
    </dd>
   <!---->

   <dt id=UAX15>[UAX15]

   <dd>Mark Davis. <a
    href="http://www.unicode.org/reports/tr15/tr15-33.html"><cite>Unicode
    Normalization Forms.</cite></a> 17 September 2010. Unicode Standard Annex
    #15. URL: <a
    href="http://www.unicode.org/reports/tr15/tr15-33.html">http://www.unicode.org/reports/tr15/tr15-33.html</a>
    </dd>
   <!---->

   <dt id=UAX29>[UAX29]

   <dd>Mark Davis. <a
    href="http://www.unicode.org/reports/tr29/tr29-17.html"><cite>Unicode
    Text Segmentation.</cite></a> 8 October 2010. Unicode Standard Annex #29.
    URL: <a
    href="http://www.unicode.org/reports/tr29/tr29-17.html">http://www.unicode.org/reports/tr29/tr29-17.html</a>
    </dd>
   <!---->

   <dt id=UNICODE6>[UNICODE6]

   <dd>The Unicode Consortium. <a
    href="http://www.unicode.org/versions/Unicode6.0.0/"><cite>The Unicode
    Standard, Version 6.0.0.</cite></a> Defined by: The Unicode Standard,
    Version 6.0.0 (Mountain View, CA: The Unicode Consortium, 2011. ISBN
    978-1-936213-01-6) URL: <a
    href="http://www.unicode.org/versions/Unicode6.0.0/">http://www.unicode.org/versions/Unicode6.0.0/</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->
  <!--{{!CSS21}}-->
  <!--{{!OPENTYPE}}-->
  <!--{{!OPENTYPE-FEATURES}}-->
  <!--{{!OPEN-FONT-FORMAT}}-->
  <!--{{!UNICODE6}}-->
  <!--{{!UAX15}}-->
  <!--{{!UAX29}}-->
  <!--{{!CORS}}-->
  <!--{{!HTML5}}-->
  <!--{{!CHARMOD}}-->

  <h3 class=no-num id=other-references>Other References</h3>
  <!--begin-informative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=AAT-FEATURES>[AAT-FEATURES]

   <dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple
    Advanced Typography font feature registry.</cite></a> Apple. URL: <a
    href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a>
    </dd>
   <!---->

   <dt id=ARABIC-TYPO>[ARABIC-TYPO]

   <dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive
    Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd>
   <!---->

   <dt id=CHARMOD-NORM>[CHARMOD-NORM]

   <dd>François Yergeau; et al. <a
    href="http://www.w3.org/TR/2005/WD-charmod-norm-20051027/"><cite>Character
    Model for the World Wide Web 1.0: Normalization.</cite></a> 27 October
    2005. W3C Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2005/WD-charmod-norm-20051027/">http://www.w3.org/TR/2005/WD-charmod-norm-20051027/</a>
    </dd>
   <!---->

   <dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING]

   <dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite>
    O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd>
   <!---->

   <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]

   <dd>L. David Baron. <a
    href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/"><cite>CSS
    Conditional Rules Module Level 3.</cite></a> 1 September 2011. W3C
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/">http://www.w3.org/TR/2011/WD-css3-conditional-20110901/</a>
    </dd>
   <!---->

   <dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY]

   <dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type
    and Composition for Computer System Design.</cite> Addison-Wesley. 1988.
    ISBN 0-201-17633-5.</dd>
   <!---->

   <dt id=ELEMTYPO>[ELEMTYPO]

   <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version
    3.1.</cite> Hartley &amp; Marks. 2005. ISBN 0-88179-206-3.</dd>
   <!---->

   <dt id=LANGCULTTYPE>[LANGCULTTYPE]

   <dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001.
    ISBN 1-932026-01-0.</dd>
   <!---->

   <dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE]

   <dd><a
    href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType
    User Guide.</cite></a> FontShop International. URL: <a
    href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf">https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf</a>
    </dd>
   <!---->

   <dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY]

   <dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster
    Tragedy at Low-Resolution Revisited.</cite></a> 14 March 2011. URL: <a
    href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd>
   <!---->

   <dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC]

   <dd>John Hudson. <a
    href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows
    Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a
    href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a>
    </dd>
   <!---->
  </dl>
  <!--end-informative-->
  <!--{{ARABIC-TYPO}}-->
  <!--{{CJKV-INFO-PROCESSING}}-->
  <!--{{DIGITAL-TYPOGRAPHY}}-->
  <!--{{ELEMTYPO}}-->
  <!--{{LANGCULTTYPE}}-->
  <!--{{OPENTYPE-FONT-GUIDE}}-->
  <!--{{RASTER-TRAGEDY}}-->
  <!--{{WINDOWS-GLYPH-PROC}}-->
  <!--{{CHARMOD-NORM}}-->
  <!--{{AAT-FEATURES}}-->
  <!--{{CSS3-CONDITIONAL}}-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>&lt;absolute-size&gt;
    <ul>
     <li>definition of, <a href="#ltabsolute-sizegt"
      title="&lt;absolute-size&gt; definition of"><strong>3.5</strong></a>
    </ul>

   <li>all-petite-caps, <a href="#all-petite-caps"
    title=all-petite-caps><strong>6.6</strong></a>

   <li>all-small-caps, <a href="#all-small-caps"
    title=all-small-caps><strong>6.6</strong></a>

   <li>annotation(&lt;feature-value-name&gt;), <a
    href="#annotationltfeature-value-namegt"
    title="annotation(&lt;feature-value-name&gt;)"><strong>6.8</strong></a>

   <li>aspect value, <a href="#aspect0" title="aspect
    value"><strong>3.6</strong></a>

   <li>at-rules, <a href="#at-rule" title=at-rules>4.1</a>

   <li><var>&lt;caps-value&gt;</var>, <a href="#ltcaps-valuegt"
    title="&lt;caps-value&gt;"><strong>6.6</strong></a>

   <li>character-variant(&lt;feature-value-name&gt;
    [,&lt;feature-value-name&gt;]*), <a
    href="#character-variantltfeature-value-namegt"
    title="character-variant(&lt;feature-value-name&gt;
    [,&lt;feature-value-name&gt;]*)"><strong>6.8</strong></a>

   <li>common-ligatures, <a href="#common-ligatures"
    title=common-ligatures><strong>6.5</strong></a>

   <li><var>&lt;common-lig-values></var>, <a href="#ltcommon-lig-values"
    title="&lt;common-lig-values>"><strong>6.5</strong></a>

   <li>contextual, <a href="#contextual"
    title=contextual><strong>6.8</strong></a>

   <li><var>&lt;contextual-alt-values&gt;</var>, <a
    href="#ltcontextual-alt-valuesgt"
    title="&lt;contextual-alt-values&gt;"><strong>6.8</strong></a>

   <li>cursive, definition of, <a href="#cursive0" title="cursive, definition
    of"><strong>#</strong></a>

   <li>diagonal-fractions, <a href="#diagonal-fractions"
    title=diagonal-fractions><strong>6.7</strong></a>

   <li>discretionary-ligatures, <a href="#discretionary-ligatures"
    title=discretionary-ligatures><strong>6.5</strong></a>

   <li><var>&lt;discretionary-lig-values></var>, <a
    href="#ltdiscretionary-lig-values"
    title="&lt;discretionary-lig-values>"><strong>6.5</strong></a>

   <li><var>&lt;east-asian-variant-values&gt;</var>, <a
    href="#lteast-asian-variant-valuesgt"
    title="&lt;east-asian-variant-values&gt;"><strong>6.10</strong></a>

   <li><var>&lt;east-asian-width-values&gt;</var>, <a
    href="#lteast-asian-width-valuesgt"
    title="&lt;east-asian-width-values&gt;"><strong>6.10</strong></a>

   <li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition
    of"><strong>#</strong></a>

   <li><var>&lt;feature-index&gt;</var>, <a href="#ltfeature-indexgt"
    title="&lt;feature-index&gt;"><strong>6.9</strong></a>

   <li><var>&lt;feature-tag-value&gt;</var>, <a href="#ltfeature-tag-valuegt"
    title="&lt;feature-tag-value&gt;"><strong>6.12</strong></a>

   <li><var>&lt;feature-value-list&gt;</var>, <a
    href="#ltfeature-value-listgt"
    title="&lt;feature-value-list&gt;"><strong>6.9</strong></a>

   <li><var>&lt;feature-value-name&gt;</var>, <a
    href="#ltfeature-value-namegt"
    title="&lt;feature-value-name&gt;"><strong>6.9</strong></a>

   <li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a>

   <li>&lt;font-description&gt;
    <ul>
     <li>definition of, <a href="#ltfont-descriptiongt"
      title="&lt;font-description&gt; definition of"><strong>4.1</strong></a>
      
    </ul>

   <li>@font-face, <a href="#font-face"
    title="@font-face"><strong>4.1</strong></a>, <a href="#font-face0"
    title="@font-face">4.1</a>, <a href="#font-face1"
    title="@font-face">4.3</a>

   <li>&lt;font-face-name&gt;
    <ul>
     <li>definition of, <a href="#ltfont-face-namegt"
      title="&lt;font-face-name&gt; definition of"><strong>4.3</strong></a>
    </ul>

   <li>font-family, <a href="#descdef-font-family"
    title=font-family><strong>4.2</strong></a>, <a href="#ltfont-familygt"
    title="&lt;font-family&gt;"><strong>6.9</strong></a>, <a
    href="#propdef-font-family" title=font-family><strong>3.1</strong></a>

   <li>font-feature-settings, <a href="#descdef-font-feature-settings"
    title=font-feature-settings><strong>4.6</strong></a>, <a
    href="#propdef-font-feature-settings"
    title=font-feature-settings><strong>6.12</strong></a>

   <li>font-kerning, <a href="#propdef-font-kerning"
    title=font-kerning><strong>6.3</strong></a>

   <li>font-language-override, <a href="#propdef-font-language-override"
    title=font-language-override><strong>6.13</strong></a>

   <li>font-size, <a href="#propdef-font-size"
    title=font-size><strong>3.5</strong></a>

   <li>font-size-adjust, <a href="#propdef-font-size-adjust"
    title=font-size-adjust><strong>3.6</strong></a>

   <li>font-stretch, <a href="#descdef-font-stretch"
    title=font-stretch><strong>4.4</strong></a>, <a
    href="#propdef-font-stretch" title=font-stretch><strong>3.3</strong></a>

   <li>font-style, <a href="#descdef-font-style"
    title=font-style><strong>4.4</strong></a>, <a href="#propdef-font-style"
    title=font-style><strong>3.4</strong></a>

   <li>font-synthesis, <a href="#propdef-font-synthesis"
    title=font-synthesis><strong>3.8</strong></a>

   <li>font-variant, <a href="#descdef-font-variant"
    title=font-variant><strong>4.6</strong></a>, <a
    href="#propdef-font-variant" title=font-variant><strong>6.11</strong></a>
    

   <li>font-variant-alternates, <a href="#propdef-font-variant-alternates"
    title=font-variant-alternates><strong>6.8</strong></a>

   <li>font-variant-caps, <a href="#propdef-font-variant-caps"
    title=font-variant-caps><strong>6.6</strong></a>

   <li><var>&lt;font-variant-css21&gt;</var>, <a
    href="#ltfont-variant-css21gt"
    title="&lt;font-variant-css21&gt;"><strong>3.7</strong></a>

   <li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian"
    title=font-variant-east-asian><strong>6.10</strong></a>

   <li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures"
    title=font-variant-ligatures><strong>6.5</strong></a>

   <li>font-variant-numeric, <a href="#propdef-font-variant-numeric"
    title=font-variant-numeric><strong>6.7</strong></a>

   <li>font-variant-position, <a href="#propdef-font-variant-position"
    title=font-variant-position><strong>6.4</strong></a>

   <li><var>&lt;font-variant-value&gt;</var>, <a
    href="#ltfont-variant-valuegt"
    title="&lt;font-variant-value&gt;"><strong>6.9</strong></a>

   <li><var>&lt;font-variant-value-definition&gt;</var>, <a
    href="#ltfont-variant-value-definitiongt"
    title="&lt;font-variant-value-definition&gt;"><strong>6.9</strong></a>

   <li>font-weight, <a href="#descdef-font-weight"
    title=font-weight><strong>4.4</strong></a>, <a
    href="#propdef-font-weight" title=font-weight><strong>3.2</strong></a>

   <li>full-width, <a href="#full-width"
    title=full-width><strong>6.10</strong></a>

   <li>historical-forms, <a href="#historical-forms"
    title=historical-forms><strong>6.8</strong></a>

   <li>historical-ligatures, <a href="#historical-ligatures"
    title=historical-ligatures><strong>6.5</strong></a>

   <li><var>&lt;historical-lig-values></var>, <a
    href="#lthistorical-lig-values"
    title="&lt;historical-lig-values>"><strong>6.5</strong></a>

   <li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a>

   <li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a>

   <li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a>

   <li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a>

   <li>&lt;length&gt;, <a href="#ltlengthgt" title="&lt;length&gt;">3.5</a>

   <li>lining-nums, <a href="#lining-nums"
    title=lining-nums><strong>6.7</strong></a>

   <li>monospace, definition of, <a href="#monospace0" title="monospace,
    definition of"><strong>#</strong></a>

   <li>no-common-ligatures, <a href="#no-common-ligatures"
    title=no-common-ligatures><strong>6.5</strong></a>

   <li>no-contextual, <a href="#no-contextual"
    title=no-contextual><strong>6.8</strong></a>

   <li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures"
    title=no-discretionary-ligatures><strong>6.5</strong></a>

   <li>no-historical-ligatures, <a href="#no-historical-ligatures"
    title=no-historical-ligatures><strong>6.5</strong></a>

   <li>&lt;number&gt;, <a href="#ltnumbergt" title="&lt;number&gt;">3.6</a>

   <li><var>&lt;numeric-figure-values&gt;</var>, <a
    href="#ltnumeric-figure-valuesgt"
    title="&lt;numeric-figure-values&gt;"><strong>6.7</strong></a>

   <li><var>&lt;numeric-fraction-values&gt;</var>, <a
    href="#ltnumeric-fraction-valuesgt"
    title="&lt;numeric-fraction-values&gt;"><strong>6.7</strong></a>

   <li><var>&lt;numeric-spacing-values&gt;</var>, <a
    href="#ltnumeric-spacing-valuesgt"
    title="&lt;numeric-spacing-values&gt;"><strong>6.7</strong></a>

   <li>oldstyle-nums, <a href="#oldstyle-nums"
    title=oldstyle-nums><strong>6.7</strong></a>

   <li>ornaments(&lt;feature-value-name&gt;), <a
    href="#ornamentsltfeature-value-namegt"
    title="ornaments(&lt;feature-value-name&gt;)"><strong>6.8</strong></a>

   <li>&lt;percentage&gt;, <a href="#ltpercentagegt"
    title="&lt;percentage&gt;">3.5</a>

   <li>petite-caps, <a href="#petite-caps"
    title=petite-caps><strong>6.6</strong></a>

   <li>proportional-nums, <a href="#proportional-nums"
    title=proportional-nums><strong>6.7</strong></a>

   <li>proportional-width, <a href="#proportional-width"
    title=proportional-width><strong>6.10</strong></a>

   <li>&lt;relative-size&gt;
    <ul>
     <li>definition of, <a href="#ltrelative-sizegt"
      title="&lt;relative-size&gt; definition of"><strong>3.5</strong></a>
    </ul>

   <li>ruby, <a href="#ruby" title=ruby><strong>6.8</strong></a>

   <li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif,
    definition of"><strong>#</strong></a>

   <li>serif, definition of, <a href="#serif0" title="serif, definition
    of"><strong>#</strong></a>

   <li>simplified, <a href="#simplified"
    title=simplified><strong>6.10</strong></a>

   <li>slashed-zero, <a href="#slashed-zero"
    title=slashed-zero><strong>6.7</strong></a>

   <li>small-caps, <a href="#small-caps"
    title=small-caps><strong>6.6</strong></a>

   <li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a>

   <li>stacked-fractions, <a href="#stacked-fractions"
    title=stacked-fractions><strong>6.7</strong></a>

   <li>styleset(&lt;feature-value-name&gt; [,&lt;feature-value-name&gt;]*),
    <a href="#stylesetltfeature-value-namegt"
    title="styleset(&lt;feature-value-name&gt;
    [,&lt;feature-value-name&gt;]*)"><strong>6.8</strong></a>

   <li>stylistic(&lt;feature-value-name&gt;), <a
    href="#stylisticltfeature-value-namegt"
    title="stylistic(&lt;feature-value-name&gt;)"><strong>6.8</strong></a>

   <li>swash(&lt;feature-value-name&gt;), <a
    href="#swashltfeature-value-namegt"
    title="swash(&lt;feature-value-name&gt;)"><strong>6.8</strong></a>

   <li>tabular-nums, <a href="#tabular-nums"
    title=tabular-nums><strong>6.7</strong></a>

   <li>titling-caps, <a href="#titling-caps"
    title=titling-caps><strong>6.6</strong></a>

   <li>traditional, <a href="#traditional"
    title=traditional><strong>6.10</strong></a>

   <li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a>

   <li>unicode-range, <a href="#descdef-unicode-range"
    title=unicode-range><strong>4.5</strong></a>

   <li>&lt;urange&gt;
    <ul>
     <li>definition of, <a href="#lturangegt" title="&lt;urange&gt;
      definition of"><strong>4.5</strong></a>
    </ul>
  </ul>
  <!--end-index-->

  <h2 class=no-num id=property-index>Property index</h2>
  <!--begin-properties-->

  <table class=proptable>
   <thead>
    <tr>
     <th>Property

     <th>Values

     <th>Initial

     <th>Applies to

     <th>Inh.

     <th>Percentages

     <th>Media

   <tbody>
    <tr>
     <th><a class=property href="#propdef-font">font</a>

     <td>[ [ &lt;‘font-style’> || &lt;font-variant-css21> ||
      &lt;‘font-weight’> ]? &lt;‘font-size’> [ /
      &lt;‘line-height’> ]? &lt;‘font-family’> ] | caption | icon |
      menu | message-box | small-caption | status-bar | inherit

     <td>see individual properties

     <td>all elements

     <td>yes

     <td>see individual properties

     <td>visual

    <tr>
     <th><a class=property href="#descdef-font-family">font-family</a>

     <td>[[ &lt;family-name> | &lt;generic-family> ] [, &lt;family-name> |
      &lt;generic-family>]* ] | inherit

     <td>depends on user agent

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property
      href="#propdef-font-feature-settings">font-feature-settings</a>

     <td>normal | &lt;feature-tag-value&gt; [, &lt;feature-tag-value&gt;]*

     <td>normal

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#propdef-font-kerning">font-kerning</a>

     <td>auto | normal | none

     <td>auto

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property
      href="#propdef-font-language-override">font-language-override</a>

     <td>normal | inherit | &lt;string&gt;

     <td>normal

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#propdef-font-size">font-size</a>

     <td>&lt;absolute-size> | &lt;relative-size> | &lt;length> |
      &lt;percentage> | inherit

     <td>medium

     <td>all elements

     <td>yes

     <td>refer to parent element's font size

     <td>visual

    <tr>
     <th><a class=property
      href="#propdef-font-size-adjust">font-size-adjust</a>

     <td>&lt;number> | none | inherit

     <td>none

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#descdef-font-stretch">font-stretch</a>

     <td>normal | ultra-condensed | extra-condensed | condensed |
      semi-condensed | semi-expanded | expanded | extra-expanded |
      ultra-expanded | inherit

     <td>normal

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#descdef-font-style">font-style</a>

     <td>normal | italic | oblique | inherit

     <td>normal

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#propdef-font-synthesis">font-synthesis</a>

     <td>none | [ weight || style ]

     <td>weight style

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#propdef-font-variant">font-variant</a>

     <td>normal | inherit | [ &lt;common-lig-values&gt; ||
      &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
      &lt;contextual-alt-values&gt; || stylistic(&lt;feature-value-name&gt;)
      || historical-forms || styleset(&lt;feature-value-name&gt; [,
      &lt;feature-value-name&gt;]*) ||
      character-variant(&lt;feature-value-name&gt;
      [,&lt;feature-value-name&gt;]*) || swash(&lt;feature-value-name&gt;) ||
      ornaments(&lt;feature-value-name&gt;) ||
      annotation(&lt;feature-value-name&gt;) || ruby || &lt;caps-value&gt; ||
      &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
      &lt;numeric-fraction-values&gt; || slashed-zero ||
      &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ]

     <td>normal

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property
      href="#propdef-font-variant-alternates">font-variant-alternates</a>

     <td>normal | inherit | [ &lt;contextual-alt-values&gt; ||
      stylistic(&lt;feature-value-name&gt;) || historical-forms ||
      styleset(&lt;feature-value-name&gt; [, &lt;feature-value-name&gt;]*) ||
      character-variant(&lt;feature-value-name&gt;
      [,&lt;feature-value-name&gt;;]*) || swash(&lt;feature-value-name&gt;)
      || ornaments(&lt;feature-value-name&gt;) ||
      annotation(&lt;feature-value-name&gt;) || ruby ]

     <td>normal

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property
      href="#propdef-font-variant-caps">font-variant-caps</a>

     <td>normal | inherit | &lt;caps-value&gt;

     <td>normal

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property
      href="#propdef-font-variant-east-asian">font-variant-east-asian</a>

     <td>normal | inherit | [ &lt;east-asian-variant-values&gt; ||
      &lt;east-asian-width-values&gt; ]

     <td>normal

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property
      href="#propdef-font-variant-ligatures">font-variant-ligatures</a>

     <td>normal | inherit | [ &lt;common-lig-values> ||
      &lt;discretionary-lig-values> || &lt;historical-lig-values> ]

     <td>normal

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property
      href="#propdef-font-variant-numeric">font-variant-numeric</a>

     <td>normal | inherit | [ &lt;numeric-figure-values&gt; ||
      &lt;numeric-spacing-values&gt; || &lt;numeric-fraction-values&gt; ||
      slashed-zero ]

     <td>normal

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property
      href="#propdef-font-variant-position">font-variant-position</a>

     <td>normal | sub | super | ordinal

     <td>normal

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#descdef-font-weight">font-weight</a>

     <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
      | 700 | 800 | 900 | inherit

     <td>normal

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual
  </table>
  <!--end-properties-->
  <!-- descriptors -->
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:t
sgml-general-insert-case:lower
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->
<!-- 

to do:

- wording of OpenType family name handling
- handling combining sequences in the font matching algorithm
- fix-up fi ligature example

-->