Closed lilyball closed 3 years ago
Now that I think about it, perhaps the issue is that the browser is synthesizing italic characters by adding oblique rendering because of the lack of an italic font. I'm not particularly familiar with @font-face
, but it does declare the font style to be "normal". I was assuming that perhaps the referenced WOFF contained both regular and italic versions, but I suspect now that the italic variant would have to be specific explicitly in order to exist at all.
Which is to say, the proper fix is to add an italic variant of Source Code Pro. It looks like an italic variant exists (and does not tilt the box drawing characters, according to my quick test on the Google Fonts page), it's just not being declared here. So either add an italic variant, or use the unicode-range
hack described above (after making sure there are no other characters that need to be excluded).
It looks like the Source Code Pro font used on docs.rs for code contains italicized versions of box drawing characters (including the ASCII Vertical Line character "|"), which is rather surprising since none of the other fonts I've tested on my computer that have these characters show any difference between the regular and italic variants.(EDIT: The browser is probably synthesizing italic by slanting all characters, including box drawing characters, as no italic variant was declared for Source Code Pro) This means ASCII diagrams in comments in the source listings do not look right, or tables, or anything else relying on straight lines. Here's an example taken from https://docs.rs/crate/tokio-util/0.6.7/source/src/codec/framed_impl.rs:If I edit the style to be 'monospace' (which on this computer is Menlo) it looks much better:
This should probably be filed upstream as a bug with your provider for the Source Code Pro font, but in the meantime, if you can't easily get a version of Source Code Pro that doesn't do this, it seems you can hack it by redeclaring an italic version of the font with theunicode-range
property.Proof of concept
Add the following CSS:
You may want to add a
font-weight: 600
variant as well just in case. I'm also not sure if this covers all the unicode characters necessary, but it does cover the ones in this diagram. This produces the following result on Safari 14 (also tested on Firefox 89):