OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <meta charset="utf-8"> | |
3 <style> | |
4 @font-face { | |
5 font-family: variabletest_box; | |
6 src:url(data:font/opentype;base64,AAEAAAAOAIAAAwBgRFNJRwAAAAEAAAigAAAACEdTVU IAAQAAAAAIJAAAAApPUy8yaByMpAAAAWgAAABgY21hcCYEJfEAAAHYAAAATGZ2YXJ6Q3iCAAAIMAAAAD RnbHlmy/PKewAAAjAAAAFaZ3ZhcsYlqCQAAAhkAAAAOmhlYWQKWWH6AAAA7AAAADZoaGVhBkIBkwAAAS QAAAAkaG10eARMAF0AAAHIAAAADmxvY2EA9QGIAAACJAAAAAxtYXhwAHoEUAAAAUgAAAAgbmFtZczowU YAAAOMAAAEU3Bvc3QdShcBAAAH4AAAAEIAAQAAAAEAABXxStdfDzz1AAMD6AAAAADUcIMTAAAAANR5m6 sAAP84AlgDIAAAAAcAAgAAAAAAAAABAAAD6P84AAACWAAAAAACWAABAAAAAAAAAAAAAAAAAAAAAgABAA AABQBJAAoAAAAAAAEAAgAeAAQAAABkA+gAAAAAAAMCNgGQAAUACAKKAlgAAABLAooCWAAAAV4AMgEsAA AAAAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFVLV04AQAAgJYQDIP84AMgD6ADIAAAAAQAAAAAB9AK8AA AAIAAAAfQAXQJYAAAAAAAAAAAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAIABBJY AlhP//AAAAIABBJYAlhP///+H/wdqD2oAAAQAAAAAAAAAAAAAAAABhAGEAegCUAK0ACgBd/zgBmgMgAA MABwALABcAHQAnACsAMQA9AEgAAAERIRETIxUzJxUjNTcjFTM1MxUjNSMVMzUjFSMVMzUjFTMVIxUzNT MnFSM1NyMVMzUjNyMVMxUjFTM1IzUzESMVMwcVMzUjNzMBmv7D8KamIWSFZCIhZCGmIYWmpkJCZEJkIU NkpkJCpUFCpkJCpkZGpmZGIAMg/BgD6P1WcVAvL844Fy9QcetCIqAhJSFGgiQkImgixyElISEl/TIhLy EhLwADAAAAAAJYArwAAwAHAAsAABEhESExETMRIREzEQJY/agUAjAUAV7+ogK8/UQCvP1EAAMAAAAAAl gCvAADAAcACwAAESERIRERMxEhETMRAlj9qBQCMBQCvP6i/qICvP1EArz9RAADAAAAAAJYArwAAwAHAA sAABEhESExETMRIREzEQJY/agUAjAUAV7+ogK8/UQCvP1EAAAAAAAVAQIAAQAAAAAAAAA5AAAAAQAAAA AAAQAQADkAAQAAAAAAAgAHAEkAAQAAAAAAAwAjAFAAAQAAAAAABAAYAHMAAQAAAAAABQANAIsAAQAAAA AABgAYAJgAAQAAAAAADQAiALAAAQAAAAAADgA/ANIAAwABBAkAAAByAREAAwABBAkAAQAgAYMAAwABBA kAAgAOAaMAAwABBAkAAwBGAbEAAwABBAkABAAwAfcAAwABBAkABQAaAicAAwABBAkABgAwAkEAAwABBA kADQBEAnEAAwABBAkADgB+ArUAAwABBAkBAAAMAzMAAwABBAkBAQAMAz8AAwABBAkBAgAGA0tDb3B5cm lnaHQgMjAxNiBUaGUgQ2hyb21pdW0gQXV0aG9ycy4gQWxsIHJpZ2h0cyByZXNlcnZlZC52YXJpYWJsZX Rlc3RfYm94UmVndWxhcjEuMDAwO1VLV047dmFyaWFibGV0ZXN0X2JveC1SZWd1bGFydmFyaWFibGV0ZX N0X2JveCBSZWd1bGFyVmVyc2lvbiAxLjAwMHZhcmlhYmxldGVzdF9ib3gtUmVndWxhclNJTCBPcGVuIE ZvbnQgTGljZW5zZSwgVmVyc2lvbiAxLjFodHRwOi8vc2NyaXB0cy5zaWwub3JnL2Ntcy9zY3JpcHRzL3 BhZ2UucGhwP3NpdGVfaWQ9bnJzaSZpZD1PRkwAQwBvAHAAeQByAGkAZwBoAHQAIAAyADAAMQA2ACAAVA BoAGUAIABDAGgAcgBvAG0AaQB1AG0AIABBAHUAdABoAG8AcgBzAC4AIABBAGwAbAAgAHIAaQBnAGgAdA BzACAAcgBlAHMAZQByAHYAZQBkAC4AdgBhAHIAaQBhAGIAbABlAHQAZQBzAHQAXwBiAG8AeABSAGUAZw B1AGwAYQByADEALgAwADAAMAA7AFUASwBXAE4AOwB2AGEAcgBpAGEAYgBsAGUAdABlAHMAdABfAGIAbw B4AC0AUgBlAGcAdQBsAGEAcgB2AGEAcgBpAGEAYgBsAGUAdABlAHMAdABfAGIAbwB4ACAAUgBlAGcAdQ BsAGEAcgBWAGUAcgBzAGkAbwBuACAAMQAuADAAMAAwAHYAYQByAGkAYQBiAGwAZQB0AGUAcwB0AF8AYg BvAHgALQBSAGUAZwB1AGwAYQByAFMASQBMACAATwBwAGUAbgAgAEYAbwBuAHQAIABMAGkAYwBlAG4Acw BlACwAIABWAGUAcgBzAGkAbwBuACAAMQAuADEAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4Acw BpAGwALgBvAHIAZwAvAGMAbQBzAC8AcwBjAHIAaQBwAHQAcwAvAHAAYQBnAGUALgBwAGgAcAA/AHMAaQ B0AGUAXwBpAGQAPQBuAHIAcwBpACYAaQBkAD0ATwBGAEwAVQBwAHcAYQByAGQAQgBvAHQAdABvAG0AVA BvAHAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAAABQAAAAMAJAECAQMKdXBwZXJfaGFsZg psb3dlcl9oYWxmAAAAAQAAAAAAAAAAAAAAAQAAABAAAgABABQAAgAIdXB3ZAAAAAAAAAAAAV4AAAAAAQ ABAQAAAAAAAAECAAABXgAAAAEAAAABAAAAAAAgAAUAAAAAACAAAAAAAAAADQANAA0AAQAKABCgAEAABA MAAQEBg0MBXgFeAV4BXgAAAAAAAQAAAAA=); | |
eae
2016/12/16 18:48:27
Why do you have both an inline and an external-res
drott
2016/12/19 14:12:34
There are two changes to add variation parameters
| |
7 } | |
8 | |
9 body { | |
10 font-family: variabletest_box, | |
11 sans-serif; | |
12 font-size: 200px; | |
13 } | |
14 | |
15 .a_low { | |
16 font-variation-settings: "upwd" 0; | |
17 } | |
18 | |
19 .a_up { | |
20 font-variation-settings: "upwd" 350; | |
21 } | |
22 </style> | |
23 <!-- The variabletest_box font has an A glyph that looks like a lower half box, | |
24 with deltas on the 'upwd' variation axis that allow shifting the box up. At | |
25 350, the box is at the top. The font also has two glyphs for UPPER HALF BLOCK | |
26 and LOWER HALF BLOCK, which look identical to the respective variations of A. | |
27 --> | |
28 A <span class="a_up">A</span> | |
OLD | NEW |