I know not every platform contains the same font faces. What would happen if a font face that is not known is used? Is it possible to be downloaded or would it choose a different font face?
The browser will use a default font. You can control your styling by coding backup fonts to use if your first pref isn't supported.
Below is an example of styling backup fonts in CSS.
P { font-family: Cambria, Georgia, Serif }
Hope this helps!
Generally, a browser will default to a font that the computer has installed, usually Arial (windows) or Helvetica (mac). There are several solutions, my favorite resource for web fonts is Google Web Fonts, absolutely free. If you have to have a particular font, Typekit has the largest selection, but be prepared to pay!
With Google Web Fonts, literally just google: Google Web font similar to (The Font you want).
Hope this helps!
If the name of font not installed in the user’s system is mentioned in a font-family declaration (or in a <font> tag), then that name is simply ignored. No automatic download takes place. (Downloadable fonts, aka. web fonts, are a different story, but for them, you really specify font URLs and assign names to them.)
The font used is then determined by other factors. If other fonts are listed in the font-family list, they are tried. Failing that, the font of the parent element is used. Ultimately, if we then come to the top level, the document as a whole, without finding any font name known in the system, then the browser’s default font is used. This font is typically changeable by the user, though few people change it. Typically it is Times New Roman in Windows systems.
Related
I have seen this post What is the default font family in HTML and how can I check this?
However, I have a few more specific questions, for the following simple HTML code, when it is displayed in a browser, will the browser use system font, i.e., the fonts in /windows/fonts, to render the web page content?
According to https://granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults, different browser use different default font, which means when the page is displayed in different browsers, the content will indeed display differently, correct? Chrome on Windows uses Arial by default, but what if the local computer does not have this font installed, will the browser use a different font, or will it display blank?
<body>
Stack Overflow
</body>
System fonts are fonts installed on the user's system. If your web site does not choose a font to use, then that user's system font will be used. Different systems have different fonts. System fonts on Windows may not be the same as fonts on Macs or Linux or BSD. Browsers do not have fonts themselves. It is not up to the browser to decide what those system fonts are.
The default fonts in all browsers are Helvetica Neue, Helvetica, Arial, and sans-serif. All computer systems have these by default, pre-installed with the operating system. It's a standard. They're there. Unless a user has deleted them everyone has them. Therefore any of those will display.
If the user does not have the font the web page code instructs to be used their computer system will use whatever their default font is set to. It will not display a blank page.
To use a specific font:
https://www.tutorialspoint.com/html/html_fonts.htm#:~:text=You%20can%20use%20a%20<basefont,use%20the%20tag.
That will work as long as the user has that font installed as the demonstrations on that page show.
To use a custom font:
How do I install a custom font on an HTML site
If you're not happy with these links this information is readily available on many different sites and in a ton of different articles that can be found by searching for it.
Relating the mechanism which permit a browser to display correctly a text formatted wiht a certain Font-Family, it should be described in this way:
the font-family property lets designers specify a prioritized list of fonts for the browser to use to display content. If the preferred font is not installed on the user's computer, the browser will attempt to use the second font in the list. If the user does not have of the preferred fonts installed, a default font is used to display the content.
In Windows 7 the set of fonts installed on the user's computer font should be viewed in Control Panel > Appearance and Personalization > Fonts.
Now in my installed fonts "Open sans" is not listed, and yet my IE11 are able to correctly reproduce a text formatted in "Open sans".
Where is the repository where IE11 get the "Open sans" font?
Thank you very much
Because of #font-face:
The #font-face rule allows for linking to fonts that are
automatically fetched and activated when needed. This allows authors
to select a font that closely matches the design goals for a given
page rather than limiting the font choice to a set of fonts available
on a given platform.
I've read that OSX and Windows have two very different algorithms for rendering fonts. As such, it's a common issue that web fonts look "heavier" when viewing them in OSX than they do in Windows.
For example, this is the same font, on the same site, in the same browser, but on different operating systems:
Here's Arial exhibiting similar differences:
Is there any way of altering the rendering of fonts in either Windows or OSX so they look closer to each other? Or is there some other technique to deal with this difference?
That font is a particularly bad example, I deal with a lot of fonts and have never seen one look like that. Keep in mind that people are used to seeing their fonts rendered a certain way on their own machines, and thus it is not your job to dictate how fonts should be rendered.
A few things to keep in mind are to only use weights you've included, for example, do not use font-weight: bold on a custom font-face if you haven't actually included the bold version of that font. "Browser bold" always looks messed up compared to the actual bold font.
Also, for some fonts, I find that I need to change the font-smoothing property for webkit browsers, as the default (subpixel-aliased) can look a little heavy. You can add this property to any element that uses the problematic font (even the body, if required).
-webkit-font-smoothing: antialiased;
I've been displaying Chinese fonts on my Chrome browser on my Mac and I liked it. However the font is rendered differently in Firefox or when I use Chrome on Windows. Is there a way to standardize the font that the browser chooses for Chinese characters?
You have various options:
As Art of FITZ says, specify an #font-face and have the font downloaded to the user (which will, indeed, take up a lot of bandwidth if the font is large)
As Jukka says, provide a list of font names in the font property and hope one of these is installed on the user's computer
The legacy method: render the text on your own computer in the font of your choice, upload this as an image file. If you don't have much text to display, this may be even more efficient than having an #font-face clause that downloads a multi-megabyte font file.
Tailor the #font-face to your needs: Depending on the amount of text to display, you may be able to create a font with only the subset of characters you need (with an online utility such as Font Squirrel), reducing the size of the font file to download.
Here is a quick reference to how this line of code is used.
http://www.css3.info/preview/web-fonts-with-font-face/
Different browsers have different default fonts, but can can override this by setting font-family in CSS. Just remember that different computers have different sets of fonts available, so you should normally use a list of fonts, hopefully covering most browsing situations.
Maybe you have done so but see different results on different browsers. Please post a relevant part of the code and/or a URL then.
is there any standard choice of the font family and font size for a general web site .. or something of that kind which are normally used...
Not really, although you'll get a good feel for what is generally used if you spent some time on the internet.
There is always a problem (when using fonts online) that your user may not have the font. This is why the font-family lets you provide multiple fonts. Here is a helpful list of fonts that exist on Windows and Mac OS. As of CSS3 we have #font-face which lets us use fonts that we provide.
Well, there is no standard for fonts at all, except for the generic fonts defined in CSS.
Helvetica is a font that is available on most systems. Use the generic font sans-serif as fallback. Arial is the Microsoft equivalent of Helvetica.
The size is a little tricker as it can vary somewhat between implementations of a font, but 14px normally gives you the same size as this text.
body { font-family: Arial, Helvetica, sans-serif; font-size 14px; }
Well there is no general guideline on which font to use on a website it is always best to use web friendly fonts which are defined on WikiPedia as
Web-safe fonts are fonts likely to be
present on a wide range of computer
systems, and used by web content
authors to increase the likelihood
that content will be displayed in
their chosen font. If a visitor to a
website does not have the specified
font, their browser will attempt to
select a similar alternative, based on
the author-specified fallback fonts
and generic families.
You will find more here
link text