Stop rendering pseudo-italic fonts when italic is not available

[ivancuric]

When using fonts which don't have italic variants, such as Fira Mono, VScode renders them anyway, using a simple skew. Goes the same for emojis.

This looks quite bad, and should be avoided.

[DevotionGeo]

@ivancuric While not the solution you wanted, but DejaVu Sans Mono looks very similar to Fira Mono with nice italic variants.

[t-ricci-enhancers]

Yeah, emojis and symbols are really bad with italics (I have a theme that makes all comments italics). Can this be fixed please?

[DevotionGeo]

If from "Can this be fixed" you meant to unitalicize the comments but keep using that theme, add the following to your settings.json

"editor.tokenColorCustomizations": {
    "[Theme Name]": {
      "textMateRules": [
        {
          "scope": [
            "comment",
            "comment.block",
            "comment.block.documentation",
            "comment.line",
          ],
          "settings": {
            "fontStyle": ""
          },
        }
      ]
    }
}

Customizing a Color Theme - Visual Studio Code

[ivancuric]

Nothing to do with a specific token, but font rendering in general. If a certain glyph doesn't have an italic variant, VScode shouldn't try to render it using faux italic. Same goes for faux bold.

This might be a Chromium issue.

[bowernite]

Yup -- emojis are particularly bad

[REYNEP]

Yes, Emoji's LOOK HORRIBLE.... 😢

[HeyProtagonist]

Is there any way to make emoji non-responsive to the font-style?

[REYNEP]

For now, I found a WorkAround if anyone is Interested, USING TextMate-Grammer that VSCODE has Support for:

Its Pretty much HardCoded based on What Characters are what..... Not really related to Fonts having the Italic Variations or not.... But at least it can FIX THE Emojis 😉

package.json (in an extension)

//package.json

"contributes": {
    "themes": [
        {
            "doc": "EXAMPLE THEME",
            "label": "Eva Dark",
            "uiTheme": "vs-dark",
            "path": "./themes/Eva-Dark.json"
        }
    ],
    "grammars": [
        {
            "doc": "as this is package.json   we have syntaxes folder which has another json",
            "path": "./syntaxes/test.tmGrammar.json",

            "doc": "should be matching to    'scopeName' that you have in test.tmGrammar.json",
            "scopeName": "NonASCII.injection.cpp",

            "doc":  "We want to INJECT, not OverWrite the Existing TEXT-MATE Scopes",
            "injectTo": ["source.cpp"]
        }
    ]
},

related TextMateGrammar.json

// ./syntaxes/test.tmGrammar.json
// I know json doesn't support DOC-STRINGS

// Well, why not just highlight nonASCII chars       U can (non-)highlight your Main Language too if Unicode has that support
{
  "scopeName": "NonASCII.injection.cpp",

  "doc": "L: means we want our TextMate Injection to be on LEFT than already existing grammar rules. means, Our Injected Scope should be more Prioritized  (REF: VSCode Syntax Highlighting Guide)",
  "injectionSelector": [
    "L:comment.block.documentation.cpp",
    "L:comment.line.double-slash.cpp"
  ],

  "doc": "We could have wrote    match & name     here inside this patterns if we wanted. But doing this has Advantages.... we could do RECURSIVE Grammar Rules     (Example in Syntax Guide)",
  "patterns": [
    {
      "include": "#Non-ASCII-Chars"
    }
  ],
  "repository": {
    "Non-ASCII-Chars": {
      "doc": "Note the double BACKSLASHES ;)      &     without the asterisk vscode will separate Non-ASCII word into letters   [It would still work but INSPECT TOKEN will show each letter separated]",
      "match": "\\p{^ASCII}*",
      "name": "comment.non-ascii.cpp"
   }
}

Then for any theme that makes COMMENTS Italic you can use the scope that you just created, in my case that would be comment.non-ascii.cpp and edit your theme file, add different logic for this scope

Well, you can choose any of the 'Character Property [3.]' from TextMate Expressions (e.g. Latin, Greek, Han or even Distinguish between Hiragana & Katakana)

Here is the Syntax Highlighting Guide part where you should start: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#injection-grammars

[robbiemu]

This may be an operating system issue?

I'm on Ventura 13.1 on a mac, and I wanted an italic from one font but the Bergen Mono otherwise. I installed only the Bergen Mono non-italics, but found it rendered with an artificial italic. Having found this thread, I gave up, and went to install the 3 missing italics. The Font installer warns me that a version of this font is already installed, and renders the same fake italics from the Bergen Mono that I believe I am seeing in vscode.

The proper solution is to remove the font, then reinstall with the additional missing faces (otherwise I believe if you try "keep both" it will rename them). But what surprised me was that it detected a conflict for a font based on only new face-and-variant of the font.

[ivancuric]

VScode should use font-synthesis: none; to fix this.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis

Sadly this doesn't work as expected with emojis on chromium.

Reported on https://bugs.chromium.org/p/chromium/issues/detail?id=1416834

[ZHDreamer]

Simply adding the css option font-synthesis: none; can fix this issue: I think adding an option or enabling customization of the css style can easily solve this problem. Is anyone working on this?