Remove all custom antialiasing [-webkit-font-smoothing] CSS lines

[gpeuc]

I've just realised that we are rather randomly using

-webkit-font-smoothing: antialiased

through our CSS. Some elements will have that, some not. This on occasion causes issues when two things that are supposed to be the same actually render differently because one of them has forceful antialiasing, and another not.

The reality of this whole topic, on some higher level, is the following:

Webkit by default uses -webkit-font-smoothing: subpixel-antialiased which is a far superior method of antialiasing fonts as it does antialiasing on sub pixel level (so uses individual R / G / B diodes to do antialiasing, instead of entire pixel of the screen).

Us overriding this causes problems.

It additionally causes problems because on Windows machines users can set how fonts render ("Smooth edges of screen fonts"), and sometimes this clashes with us then forcefully adding antialiasing.

Therefore, the best thing we could do is simply remove all -webkit-font-smoothing: antialiased that we have, and simply not mention it again. We let operating system, and user, choose how stuff renders. We should not interfere with that.

---

https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

[gpeuc]

Fluent does this at the top level, we should somehow remove this if possible.

[gpeuc]

In conversation with mr. @815are this is what we will do:

• Try to override Fluent's top level setting for Webkit Font Smoothing to auto
• Go to our components that we custom made, and make sure that we remove all Font Smoothing there

This should then get rid of all forceful Font Smoothing, and leave it to the operating system to handle fonts.

[815are]

as checked following code works for me:

import { createTheme, loadTheme, Theme } from '@fluentui/react';

const typographyStyles = {
    WebkitFontSmoothing: ''
};

const appTheme: Theme = createTheme({
    fonts: {
        tiny: typographyStyles,
        xSmall: typographyStyles,
        smallPlus: typographyStyles,
        medium: typographyStyles,
        mediumPlus: typographyStyles,
        small: typographyStyles,
        large: typographyStyles,
        xLarge: typographyStyles,
        xxLarge: typographyStyles,
        superLarge: typographyStyles,
        mega: typographyStyles
    }
});

loadTheme(appTheme);

Suggestion to create export method initTheme similar like method initIcons.

[eouin]

@815are Tried it and works for me as well. Let's create that initTheme in ui-components

[815are]

PR - #2478