Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
<title>CSS Test: font-synthesis-style: none disables fake italic/oblique</title>
<link rel="match" href="font-synthesis-style-binary-ref.html">
<meta name="assert" content=" If ‘style’ is not specified, user agents must not synthesize italic faces for base64 encoded fonts">
<style>
@font-face {
font-family: "NotoSans subset";
src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAs4ABEAAAAAEsAAAArbAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgQ4cMgZgAGQIgX4JjzQREAqGGIU9CxQAATYCJAMkBCAFgjgHIAyEGhsoESMRwcYBBPS+OtlfHphDRE0PmY9orCaG8CHhhnQfLmmvI6tM6zjqEHjW5ciGfInp7m/Y/hupDzxeun7CTf/dXYIFq2myz6BitMwkK3UqKSRoBapGJ87E2okL/W6G/znV9yX5a3nMWOmGayEjhRbAMcbxEpAC1ivipYE4BLnteGCjFFInNLJmN4vOkKrBFt3w/9W9yiW0C6TCU1/Zdhn+txwkqSh/oClTy3NzlGzDdctb1y4bb0n6o/73PwA/+syKMLhc+9ducvdRcVERqApHStaYbJIHuTyi/YS5ArKqrJCtq6sjgvEVpg5YWNtjv/nQ2ix46gpueIuozzcNIABQM7C4bJcDqp5NBcUakNalI30Qe4609wJ3BUYHIBcF8MDYOpsVHQ8D6W0fGYBY2w8AqRkpwKAAZPVzhASScRkhILCl10/yyLeWYb0lE/KZ0Qu4o31REYXA1ltV4pgrE2oX2gk0KOjDtAUAsdUdkJegI0CBMUNjiqYwprZnK3bBmllbBzzOkrbtvwJ7J9jNATrxwRsAVBV9OwBw5kiS49ZIgbs9mn67/wVOmXbd+owYtWTN4/7N9j2OOeygPXbbEQJzWlksMCDU2yHBQrstHUdVQKxDRJbpqP/byO+I/ZXE/Ht9Z7Ue96r6H5hV0FHIAsoLwu/I6dtB8/+t59e5v3xXEoMabYr8LHnQ4qmRX8Rl0ADAPjtsstJRZ30G41h42nmH4e51elw65Dhi5C4bPhNAcXBklPu8HrckOuz1Ql1tTbWtqrKivKy0xFq8gJ8/b+6c2bNmzpg+bWqhuSC/U0mTUydPHD/GR9WRfbuicPs2DaNSKv7FfkEgvwYxUpQXrLnoxzrS+zrZ38yacweuICygTNzfP5nhQoIzJpYsSo1i/Jw6fL6GXy4I6ba4vXjHhOeyfvgNeSfMELaNtYTvvJo8ZZJMk1UKrbZIbqmo10LZ844vdVmxdlAyKitXm5sGo0XpGLNZbIh1ni9R5t2A9+BMfbNPoMhWKffS6aIBIVtKZ1IpWywYgNaQ+fNgXdwEyKyQ56i72Z8MxtfK3B9+6Vsoai7e0uBG8diABGyaeFLqx94jipHFGbJe/wtpopvI5UwjpywOTa4DBzUTXyUAbQyZ/G9Afl5ZdqoCIBORZOsBW4HsRpmXJHPOnR/LmXLv94FvkVCNKWQ/sUU9NqQdAQQDBF3l7kWJsiUP9K4T3LS7fYJ8cggxE48MMCfqFA7Ga95jdV2qKHxQ49OWE9BWyI5uQIdw7XHjOe3HMyWzOuPzFUIT5tBcavFOEjX5AfhzsQX2g9UP1u+eqQ5pz6PeF7eOVZoMTRkfXmMcaLDugl8MIFQDV/ROzuU4hPZ3qdhHR3TjnMU1EsjyXQJtgmyObVq3gTLpvC9HRK0VfSe910U76AZ3g3PLGNSsHV36eWcfQjVy21ERH4gMiCrLZ3WRL85ary7N59DZwiX5bnZCt0ABzyOWK2dYHZj27pRpH5llVcRWAf66EMzqe6uftPfXgVa3NMQT5jtYIr/KyyQ/WsRlsFnLpeKrBsSkHs/daIF1sgHOtchIBd4CBSybpkXW0anN+iWNtdfLWabN0BQPTTw01zdCar2ow1FGvYgWNvLkoI1QGDeQWSVX21YmnMhSXjuu3AYFg1z0EPBlBOSPBXJEIEUFWb+6g6SbGQbHt12gLAaJsdq/JBkMyDKEMyCVVYbSZNW0JK0U0WaDLOl+PxCh0G3Cxqo+jsG+C/+yZLjJljsEftwo8IdGHeHIgVDHO3Ke9p0eixwoTRcAJtmmRfRAEspitrWGci3iRNcVGSA+Mgj5aRzI4pi6V4+AithKCCf1UnZhPiHmUskrtVjOKwxDU357kyxDAWGMel9woEcAhwHvvKy+qnDkDQMNKnD523L/w0nzTr6uHaLFUFC8vEqalBgVl4Zgob7kgwXHQ1NiKP6uF4LbLJoPGGGrq9hycmgF850Tggc4RqFGOCeXZCYpV/RY+Z1v54U4ZW3Zf/cNgVutqCX4OKFfCTchyIRPeTwypnyFF1ImV8KJknuAxXy9r8NDr5Q2TY2LY7m3tuP99gYLIT6Mjd21AiDDXQGhL1EiLFOHVYZmBYyhAvF7/j0uA/kxAcUHaXLeTsEhuAM/pdevHMaMJ+ZicCv/0wggSBg45NBzCph6i2SdmC/F/hhA1dErEUSnij46XKdVquo+zdz3yFWBfG//2Odk3RfM+FsA2tdeY8bfcMGrry4be1XUvf66RqVkvGteYcZfgtCrGnt5jqWY5eOl4uNDEc4CFXAS88Ybg/j/8ww4+6m2ElqFXC4GNKCmQq/19jDtnUxXt6qjTbX6TqBvLzy9VGY/ZS8LxfyRmC1T0DM+eOE31af9P1J33/LQOfex9O7c417TCVZ55oM1+85p9hSgQ1tO2Fpurbr1ocw5j+VlfzZn9hfZeU9ktdwKsthb47M/bapcHnfuuVmuvc2Oi51Vt1btjXlSMa/vymBu6ipDo2bJ2FhX7LRix+ojzqPl5V/1/jt369xlzd52fsK8TLgwWziWcOyZZWFqfm7ztvzbnskHAJOYAVKGpPNsXxwzFRz5qq+m/cZeMguqRfJCSMQthFgPe1eXFxdbVU39UB1VRwf7k/XaBS/dWI6XloO/NA4ki0AlhwDm7uKES+Q3MJod52vDEBZhr6Q36Pi5epAjJctKZ3d+NEVNWhTUIcb/NUq1gQWRSgT86NPiDrvcOe9F3eQeaeE7JLdQrhJicliTip531duybW2trOpDXk5ck5Vlc39SFhoXVm+oQdvhhVDOimQlb5K8tInWbOGTNLPSKyqMJz1H8ahup9NI+VQgAOSMbu5N9eHPmnVzflMwCgAAeCH7Hk+1oe8f879vu92Klgu7EQMA0j8NGdXtgdo/7pbOtubiSuo5eIjKgCeodTAcejgZN1zPtZvHJzCpzAZj/CTdvhLZQbQeAxj0EjQA9BSxAQm0ycHbZCmlbm0CkxBEa5qEQQtDkwjMsGpvKjyJhkS3P6wM9J4Hq0FDlhrRrVOXUZwiZoWWOOUBMwg19mmfttKAVvlmgcP60vY5bHCM2gV7NGKRNm0oqjUIs0FyCMxpg2HqtJCaAMbUwHaAdy41tHzqF8io24A9GicPtwTmNCOV7Z63nVP4q5iegoqqPAEzr0gLOpyIX1ZZOAm49IOGnbBaCJcusRaibzgd6dLnp99IJz7BK8331nmxF7klj0B6zG7eHZ8o7KZcglPinOhHLniPKEkCf4lDImJFZBZ5MSS+KH4o0uYaVINrpfK2Mml+2Y0yXIZsUpVQKVVW69QJtZKlFtXGmWqBXZi1IZ1tvu2GjTgEuzTbjtTDCVK9IEjTJ6NVgTbWvRItDqazi4IL2IXBInaU9hwIojsFvPnJkyyJktxCJBmJsHd3EtvXbWJ7u+eyPd0V7IVu5DUhhanChCtMm01Pmshqww7DCwYSY4nm+yUaEYnaWSAPQeaTG4S0NU5hl7SilkYDG2i0sP7GbLaZmabhA9/Z+GQjfrPxy0ac2pYixVviJL1FJ+l0dTrM6l7QYQWRTyDDCKTUBtIDq93wA1B6QKF4RKM70c4J0ZGTY7tTHrHbwkrBF0abw0aHdXy9NyyTNw7S7nNPILTds2HbNijutnCRwx32p3k0a+M8C11InzYRD8VbMJiT0xQcXcggBwVyzeNBLoyfo0MSjCZYS60QJseRIgKaYJFLbAIAAA==);
font-style: normal;
font-weight: 400;
}
@supports not (font-synthesis-style: none) {
.test {color: red;}
}
.test {
font-family: "NotoSans subset";
font-size: 3em;
}
.nosynth {
font-style: italic;
font-synthesis-style: none;
}
</style>
<p>Test passes if the two lines below are identical (the second line is <em>not obliqued</em>), and there is no red.</p>
<section class="test">
<p>Filler text</p>
<p class="nosynth">Filler text</p>
</section>