Call the font according to the font name to let the browser display the font you want
|
Question 1: How do you instruct the browser to display the font you want? Just type the name of the font after the font face? Unfortunately, things are not that simple. The names of fonts may vary on different operating platforms. For example, Courier is called Courier New on a MAC. A font that might be called Italic on one machine might be called Oblique on another. You'll find many more examples of this if you study carefully. So, the name we call a font is not necessarily the name that the computer uses for that font. And you must make sure that the font name you use is the same as the font name on your computer. So how do you determine what the computer's exact name for a font is? This depends on the operating platform used by the computer. • Windows users: Use the exact font name listed in the font menu in an application such as Word. •Mac users: Don't trust the font names that the application lists for you. Instead, open your system folder and use the font name in your style sheet according to the spelling of the font there. Font Series A font family is a name attribute in CSS that refers to a font. Its basic syntax is as follows: Copy code The code is as follows:H2 { font-family: helvetica, impact, sans-serif } Here is the rule for how a web browser interprets a style sheet: First it looks for the name of the font in the list (helvetica), and if that font is installed on the computer, it uses it. If it is not installed, it moves to the next font (impact), and if that font is not installed either, it moves to the third font (sans-serif). The sans-serif font parameter is the last parameter that the browser can rely on, which tells the browser to use any default sans-serif font (probably Arial). The following is the actual display result of the browser you are using: CSS font control is peachy. You can add any font names to the list. This is undoubtedly a good idea when you are not sure about the name of a font on different operating platforms. Note: Browsers prefer lowercase names. Of course, as long as you test all items, there will be no problem. It is good practice to always list a generic font as the last option in your font list. You can choose from the following: •serif (may also be Times) •sans-serif (may also be Arial or Helvetica) •cursive (maybe Comic Sans) •Fantasy (maybe Ransom) •monospace (possibly Courier) (Note: Netsacpe Communicator does not support Cursive or Fantasy) Other font name tips: •If a font has a name that is more than one word, such as Gill Sans, enclose the font name in quotation marks in your CSS code. BODY { font-family: "gill sans", "new baskerville", serif } • CSS rules added inline, use single quotes: Copy code The code is as follows:<P STYLE="font-family: 'gill sans', 'new baskerville', serif">Text goes here.</P> • If you group CSS rule specifications together and include font families, list the font family last, for example: Copy code The code is as follows:H2 { color: red; margin: 10px; font-family: times, serif } • Sometimes, IE 3 will ignore an entire CSS rule if the font family is not listed last. It's weird, but it's true. The font family attribute allows you to call fonts by font name and has greater flexibility when using the <FONT FACE> tag. |
<<: Introduction to the process of creating TCP connection in Linux system
>>: HTML Grammar Encyclopedia_HTML Language Grammar Encyclopedia (Must Read)
Recommend
Eight implementation solutions for cross-domain js front-end
Table of contents 1. jsonp cross-domain 2. docume...
Two implementation codes of Vue-router programmatic navigation
Two ways to navigate the page Declarative navigat...
Detailed explanation of setting resource cache in nginx
I have always wanted to learn about caching. Afte...
Various ways to modify the background image color using CSS3
CSS3 can change the color of pictures. From now o...
MySQL 5.6.33 installation and configuration tutorial under Linux
This tutorial shares the installation and configu...
Let's talk about the LIMIT statement in MySQL in detail
Table of contents question Server layer and stora...
Detailed explanation of loop usage in javascript examples
I was bored and sorted out some simple exercises ...
MySQL database migration quickly exports and imports large amounts of data
Database migration is a problem we often encounte...
How to use Docker buildx to build multi-platform images and push them to private repositories
Introduction Recently I found that there is an AR...
Detailed explanation of why v-if and v-for in Vue are not recommended to be used together
This article mainly introduces why v-if and v-for...
How to redraw Button as a circle in XAML
When using XAML layout, sometimes in order to make...
Detailed explanation of HTML style tags and related CSS references
HTML style tag style tag - Use this tag when decl...
How to create your own image using Dockerfile
1. Create an empty directory $ cd /home/xm6f/dev ...
Multiple ways to implement two-column layout with fixed width on the left and adaptive width on the right using CSS
7 ways to implement a two-column layout with fixe...
Negative margin-top value solves the problem of vertical center alignment between label text and input
It is not easy to adjust the vertical center align...