search

Orange-OpenSource / font-accessible-dfa

A designed for all font that covers lots of needs.
Other
25 stars 4 forks source link

OTF/WOFF/TTF font color remains black despite CSS style (Chrome web browser only, Safari and Firefox okay on MacOS) #2

Closed danielweck closed 5 years ago

danielweck commented 5 years ago

Issue originally raised here: https://github.com/readium/readium-css/issues/56

danielweck commented 5 years ago

Here is a reduced test case (in the second paragraph, the text color should be red, it remains black):

<html>
<head>
<style>
@font-face {
  font-family: AccessibleDfA;
  font-style: normal;
  font-weight: normal;
  src: local("AccessibleDfA"),
    url("https://raw.githack.com/Orange-OpenSource/font-accessible-dfa/master/All Fonts/AccessibleDfA.otf") format("opentype");
}
</style>
</head>
<body style="font-family: AccessibleDfA;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<hr>
<p style="color: red;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</body>
</html>
danielweck commented 5 years ago

Copy/paste data: URL (same HTML content as above, base64-encoded):

data:text/html;base64,PGh0bWw+CjxoZWFkPgo8c3R5bGU+CkBmb250LWZhY2UgewogIGZvbnQtZmFtaWx5OiBBY2Nlc3NpYmxlRGZBOwogIGZvbnQtc3R5bGU6IG5vcm1hbDsKICBmb250LXdlaWdodDogbm9ybWFsOwogIHNyYzogbG9jYWwoIkFjY2Vzc2libGVEZkEiKSwKICAgIHVybCgiaHR0cHM6Ly9yYXcuZ2l0aGFjay5jb20vT3JhbmdlLU9wZW5Tb3VyY2UvZm9udC1hY2Nlc3NpYmxlLWRmYS9tYXN0ZXIvQWxsIEZvbnRzL0FjY2Vzc2libGVEZkEub3RmIikgZm9ybWF0KCJvcGVudHlwZSIpOwp9Cjwvc3R5bGU+CjwvaGVhZD4KPGJvZHkgc3R5bGU9ImZvbnQtZmFtaWx5OiBBY2Nlc3NpYmxlRGZBOyI+CjxwPgpMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzY2luZyBlbGl0LCBzZWQgZG8gZWl1c21vZCB0ZW1wb3IgaW5jaWRpZHVudCB1dCBsYWJvcmUgZXQgZG9sb3JlIG1hZ25hIGFsaXF1YS4gVXQgZW5pbSBhZCBtaW5pbSB2ZW5pYW0sIHF1aXMgbm9zdHJ1ZCBleGVyY2l0YXRpb24gdWxsYW1jbyBsYWJvcmlzIG5pc2kgdXQgYWxpcXVpcCBleCBlYSBjb21tb2RvIGNvbnNlcXVhdC4gRHVpcyBhdXRlIGlydXJlIGRvbG9yIGluIHJlcHJlaGVuZGVyaXQgaW4gdm9sdXB0YXRlIHZlbGl0IGVzc2UgY2lsbHVtIGRvbG9yZSBldSBmdWdpYXQgbnVsbGEgcGFyaWF0dXIuIEV4Y2VwdGV1ciBzaW50IG9jY2FlY2F0IGN1cGlkYXRhdCBub24gcHJvaWRlbnQsIHN1bnQgaW4gY3VscGEgcXVpIG9mZmljaWEgZGVzZXJ1bnQgbW9sbGl0IGFuaW0gaWQgZXN0IGxhYm9ydW0KPC9wPgo8aHI+CjxwIHN0eWxlPSJjb2xvcjogcmVkOyI+CkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNjaW5nIGVsaXQsIHNlZCBkbyBlaXVzbW9kIHRlbXBvciBpbmNpZGlkdW50IHV0IGxhYm9yZSBldCBkb2xvcmUgbWFnbmEgYWxpcXVhLiBVdCBlbmltIGFkIG1pbmltIHZlbmlhbSwgcXVpcyBub3N0cnVkIGV4ZXJjaXRhdGlvbiB1bGxhbWNvIGxhYm9yaXMgbmlzaSB1dCBhbGlxdWlwIGV4IGVhIGNvbW1vZG8gY29uc2VxdWF0LiBEdWlzIGF1dGUgaXJ1cmUgZG9sb3IgaW4gcmVwcmVoZW5kZXJpdCBpbiB2b2x1cHRhdGUgdmVsaXQgZXNzZSBjaWxsdW0gZG9sb3JlIGV1IGZ1Z2lhdCBudWxsYSBwYXJpYXR1ci4gRXhjZXB0ZXVyIHNpbnQgb2NjYWVjYXQgY3VwaWRhdGF0IG5vbiBwcm9pZGVudCwgc3VudCBpbiBjdWxwYSBxdWkgb2ZmaWNpYSBkZXNlcnVudCBtb2xsaXQgYW5pbSBpZCBlc3QgbGFib3J1bQo8L3A+CjwvYm9keT4KPC9odG1sPg==

danielweck commented 5 years ago

Web browsers (MacOS): 1) Safari (works as intended, second paragraph is red) 2) Firefox (works as intended, second paragraph is red) 3) Chrome (does not work, second paragraph is black)

danielweck commented 5 years ago

By the way, the test above is with the OTF deliverable, but I am able to reproduce with the TTF and WOFF variants too.

https://github.com/Orange-OpenSource/font-accessible-dfa/tree/master/All%20Fonts

danielweck commented 5 years ago

Ah, after clearing the browser cache, removing the local font, dealing with CORS issues, and setting up an HTTPS test URL, ... I am not able to reproduce the bug. I am closing this issue until we find out exactly how to reproduce the "bug" using a minimal reproducible test case. Sorry for the noise. https://accessible-dfa-color.surge.sh/ReadiumCSS_AccessibleDFA_NightMode.html