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
Let the web page redirect to other pages after opening for a few seconds
Just add the following code to achieve it. Method ...
How to install and configure SSH service in Ubuntu 18.04
Install ssh tool 1. Open the terminal and type th...
MySQL Basic Tutorial: Detailed Explanation of DML Statements
Table of contents DML statements 1. Insert record...
Summary of using the reduce() method in JS
Table of contents 1. Grammar 2. Examples 3. Other...
Detailed explanation of the installation and use of Vue-Router
Table of contents Install Basic configuration of ...
Detailed explanation of the use of grid properties in CSS
Grid layout Attributes added to the parent elemen...
How to set up cross-domain access in IIS web.config
Requirement: The page needs to display an image, ...
Button does not specify type as submit. Clicking the button does not jump to the specified URL.
Today, due to project requirements, js is needed t...
About IE8 compatibility: Explanation of the X-UA-Compatible attribute
Problem description: Copy code The code is as fol...
Use iptables and firewalld tools to manage Linux firewall connection rules
Firewall A firewall is a set of rules. When a pac...
Vue implements the product tab of the product details page function
This article example shares the specific code of ...
Summary of MySQL common SQL statements including complex SQL queries
1. Complex SQL queries 1.1. Single table query (1...
Process parsing of reserved word instructions in Dockerfile
Table of contents 1. What is Dockerfile? 2. Analy...
Solution for coexistence of multiple versions of PHP under Linux system (super simple)
Since PHP7 came out, as a fan of the latest versi...
Jenkins+tomcat automatic hot deployment/restart and solutions to problems encountered (recommended)
1. Background The company's projects have alw...