Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Introducing CSS Font-Display Property

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 314
    Comment on it

    Hello readers, In this blog I have got an updating news regarding CSS font-display property.


    As we all work on Web Pages that includes various typeface and we didn’t have the option of setting our text .


    Basically, to reduce the font load due to extra weight pages and flashes of unstyled or invisible text , a new functionality is introduced in CSS.

    Web Support

    The font-display property is currently applied in Opera browser for Android and Chrome. ( It has been first introduced in Chrome 49 as an experimental feature for testing).

     

     

    Attribute Description With Values

    The font-display property has four options , these are as follows :-

    Auto , swap , fallback and optional .


    If we apply font-display : auto , then the text will be invisible until the custom font gets loaded.


    Now if we apply font-display :swap , on applying this , if the font is not loaded in spite of showing invisible content it gets replaced which is more user-friendly.

     

    Further applying font-display :fallback , it follows a processor such as , if for a delay of 100 milliseconds the text remains invisible then the custom font will be loaded and used.

    Until the custom font gets loaded , the next font which is in the line of priority will be displayed.


    Now the last , if we apply font-display:optional it basically works as the fallback , now if the speed of the Internet gets slow then the browser does not load the custom font at all.
     

    Note :- The display-font property is used in a @font-face declaration, that means it will not work with Google Fonts or Typekit.

    Once this property gets widespread , it will be used by all browsers.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: