What does the forward slash mean in the CSS font shorthand?

by

12px is the font size, 18px is the line height.

The syntax is based on typographical notation for specifying the respective sizes, and is only applicable to the font shorthand property. In other words, the above declaration simply expands to the following:

font-size: 12px;
line-height: 18px;

As always, if you set the line height to a relative value (e.g. percentage or ems), it’s calculated relative to the font size.

W3C CSS2.1 font property reference
W3C CSS3 Fonts Module font property reference (the syntax carries over from CSS2.1)

More Related Contents:

  1. Transparent text cut out of background
  2. Are eot, ttf, and svg still necessary in the font-face declaration?
  3. Same font except its weight seems different on different browsers
  4. Font Awesome 5 Choosing the correct font-family in pseudo-elements
  5. Browsers’ default CSS stylesheets
  6. How to import Google Web Font in CSS file?
  7. CSS Font Border?
  8. Wait for fonts to load before rendering web page
  9. Is there any “font smoothing” in Google Chrome?
  10. Downloading a Google font and setting up an offline site that uses it
  11. How can I determine what font a browser is actually using to render some text?
  12. Failed to decode downloaded font
  13. Create webfont with Unicode Supplementary Multilingual Plane symbols
  14. CSS: bolding some text without changing its container’s size
  15. Font size in CSS – % or em? [duplicate]
  16. Webfont Smoothing and Antialiasing in Firefox and Opera
  17. Webpack “OTS parsing error” loading fonts
  18. Force Non-Monospace Font into Fixed Width Using CSS
  19. Fallback fonts on special characters
  20. Why would font names need quotes?
  21. Styling Password Fields in CSS
  22. What does font-size really correspond to?
  23. Make text height 100% of div?
  24. Non-Standard fonts in web?
  25. How to add fonts to create-react-app based projects?
  26. When setting a font-size in CSS, what is the real height of the letters?
  27. Font weight turns lighter on Mac/Safari
  28. How to prevent different browsers rendering fonts differently?
  29. How do I style a specific word with CSS in an HTML element?
  30. css different font sizes on different families

Leave a Comment