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
Deleting the database and running away? How to use xtraback to back up the MySQL database
1. The mysqldump backup method uses logical backu...
Webservice remote debugging and timeout operation principle analysis
WebService Remote Debugging In .NET, the remote d...
How to implement communication between Docker containers
Scenario: A laradock development environment (php...
Solve the problem of insufficient docker disk space
After the server where Docker is located has been...
js Promise concurrent control method
Table of contents question background Idea & ...
CSS realizes the speech bubble effect with sharp corners in the small sharp corner chat dialog box
1. Use CSS to draw a small pointed-corner chat di...
Example code for implementing verification code login in SMS API in Node
1. Node server setup + database connection The op...
How to Fix File System Errors in Linux Using ‘fsck’
Preface The file system is responsible for organi...
XHTML Web Page Tutorial
This article is mainly to let beginners understan...
Linux uses suid vim.basic file to achieve privilege escalation
Reproduce on Kali First set suid permissions for ...
Meta viewport makes the web page full screen display control on iPhone
In desperation, I suddenly thought, how is the Sin...
HTML table tag tutorial (32): cell horizontal alignment attribute ALIGN
In the horizontal direction, you can set the cell...
How to change fixed positioning of child elements to absolute positioning by CSS3 transform
This article introduces the method of using CSS3 ...
Nginx domain name SSL certificate configuration (website http upgraded to https)
Preface HTTP and HTTPS In our daily life, common ...
Five solutions to cross-browser problems (summary)
Brief review: Browser compatibility issues are of...