1738700-1.html (2176B)
1 <html> 2 <head> 3 <meta charset=UTF-8> 4 <title>“Amiri Quran Colored” test</title> 5 <style> 6 @font-face { 7 font-family: AmiriColored; 8 font-style: normal; 9 font-weight: 400; 10 src: url('../fonts/AmiriQuranColored.otf'); 11 } 12 @font-face { 13 font-family: AmiriMonochrome; 14 font-style: normal; 15 font-weight: 400; 16 src: url('../fonts/AmiriQuran.otf'); 17 } 18 .test { 19 direction: rtl; 20 text-align: justify; 21 text-align-last: center; 22 font-size: 40px; 23 margin: 1em; 24 position: absolute; 25 } 26 .colored { 27 font-family: AmiriColored; 28 } 29 .monochrome { 30 font-family: AmiriMonochrome; 31 /* Add some stroke to hide antialiased edges of the colored glyphs */ 32 -webkit-text-stroke: 3px black; 33 } 34 </style> 35 </head> 36 <div>The colored Arabic text should be exactly covered by (thicker) black text:</div> 37 <div class="test colored"> 38 <p> 39 ﷽ ١ 40 <br> 41 ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِینَ ٢ 42 ٱلرَّحۡمَـٰنِ ٱلرَّحِیمِ ٣ 43 مَـٰلِكِ یَوۡمِ ٱلدِّینِ ٤ 44 إِیَّاكَ نَعۡبُدُ وَإِیَّاكَ نَسۡتَعِینُ ٥ 45 ٱهۡدِنَا ٱلصِّرَ ٰطَ ٱلۡمُسۡتَقِیمَ ٦ 46 صِرَ ٰطَ ٱلَّذِینَ أَنۡعَمۡتَ عَلَیۡهِمۡ غَیۡرِ ٱلۡمَغۡضُوبِ عَلَیۡهِمۡ وَلَا ٱلضَّاۤلِّینَ ٧ 47 </p> 48 </div> 49 <div class="test monochrome"> 50 <p> 51 ﷽ ١ 52 <br> 53 ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِینَ ٢ 54 ٱلرَّحۡمَـٰنِ ٱلرَّحِیمِ ٣ 55 مَـٰلِكِ یَوۡمِ ٱلدِّینِ ٤ 56 إِیَّاكَ نَعۡبُدُ وَإِیَّاكَ نَسۡتَعِینُ ٥ 57 ٱهۡدِنَا ٱلصِّرَ ٰطَ ٱلۡمُسۡتَقِیمَ ٦ 58 صِرَ ٰطَ ٱلَّذِینَ أَنۡعَمۡتَ عَلَیۡهِمۡ غَیۡرِ ٱلۡمَغۡضُوبِ عَلَیۡهِمۡ وَلَا ٱلضَّاۤلِّینَ ٧ 59 </p> 60 </div> 61 </html>