How to set font family and size in html/css


Tags: html,css

Problem :

I'd like to use css syntax in HTML document to set the font-family to "Arial" and font-size to 0.3cm for the whole document.

I use this code:

<style>
body { font-family: Arial; font-size: 0.3cm }
</style>

I am not sure if writing only Arial is enough, or should I write something like this?

<style>

body { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 0.3cm }
  </style>

and I am also not sure if I cam use "cm" in the code, I mean it works in the browser but is it correct "code-wise" ?

thanks



Solution :

font-family: Arial

This means the browser will use Arial if you have it installed on your system. If not, it will use whatever the default font is for your browser.

font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif

This means the browser will use Arial if you have it installed on your system. If not, it will use Helvetica Neue if you have it installed on your computer. If not, it will use Helvetica if you have it installed on your computer. If not, it will use whatever the default sans-serif font is for your browser.

Both are perfectly valid. They just do slightly different things.

and I am also not sure if I cam use "cm" in the code

Yes, cm is a valid CSS unit of measurement.


    CSS Howto..

    How to set the color to the user's link color in CSS?

    How to switch visibility of an HTML div in css for overlaying

    How to make input+label in a form appear one by one?

    How can I set the text on the right of a glyphicon into a Twitter BootStrap theme?

    grayscale - how to disable it automatically

    How to set -fx-max-width to USE_PREF_SIZE in JavaFX css?

    how to create css gradients and shadow

    how to set primefaces datatable columns padding with CSS padding

    How to make the effects of jQuery's $(element).css() persistent?

    CSS: How to create colsgroup like semantic-ui way

    How to get GWT console/development mode to generate css errors?

    How to set up simple hover buttons with block format?

    How to create responsive blocks by using just CSS and HTML

    How do I create an oval around text in CSS?

    How do I keep sibling divs from pushing each other down when I use “margin-top: 4px” on one of them?

    How to add background video stop button

    CSS: How to align elements around a centered element?

    How to select the table heading of the first row in table using css selectors?

    How to stretch images with no antialiasing

    How can I highlight position in nav bar for single-page website?

    How to make a div fill up remaining horizontal space

    How to highlight table rows if error is found - Jquery

    How to position text in a navigation “div.”

    How to create an HTML CSS Page with Header, Footer and Content

    How to force text to wrap inside inline-block div?

    How to reset tag in CSS

    How to make a text slideshow using CSS/HTML/JAVA

    How to apply css selector in ZK

    How to make a fixed position centered after zooming the whole website out?

    Mapbox GeoJSON loaded via local URL: icons not showing popup properties