fix(material-experimental/mdc-form-field): make sure fonts are loaded…

[annieyw]

… before calculating notch width

The label width was being calculated before the fonts were loaded which caused the label to be cut off sometimes. By calculating the width after fonts.ready resolves we can be sure that the label will be the correct size.
Note that the workaround for IE is not perfect as depending on the connection speed the font still might not be loaded after the time out.

Before:

After:

[annieyw]

• use DOCUMENT injection token
• use feature detection instead of checking for browser

[crisbeto]

LGTM

[annieyw]

Add markForCheck because original change was causing prefilled form fields to have a large gap. Waiting for the fonts to the loaded causes a delay so extra change detection is needed to reflect the calculated width

[annieyw]

Some tweaks to make sure this change works in async tests as zone.js doesn't patch the FontFaceSet API and to account for really slow connections.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}