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
Centos7 startup process and Nginx startup configuration in Systemd
Centos7 startup process: 1.post(Power-On-Self-Tes...
The table tbody in HTML can slide up and down and left and right
When the table header is fixed, it needs to be di...
Supplementary article on front-end performance optimization
Preface I looked at the previously published arti...
MySQL 5.7.15 installation and configuration method graphic tutorial (windows)
Because I need to install MySQL, I record the ins...
Use momentJs to make a countdown component (example code)
Today I'd like to introduce a countdown made ...
SSH port forwarding, local port forwarding, remote port forwarding, dynamic port forwarding details
Part 1 Overview of SSH Port Forwarding When you a...
How to install Docker CE on Ubuntu 18.04 (Community Edition)
Uninstall old versions If you have installed an o...
How to implement function currying and decurrying in Javascript
Function currying (black question mark face)? ? ?...
How to modify the scroll bar style in Vue
Table of contents First of all, you need to know ...
The implementation code of the CSS3 input box is similar to the animation effect of Google login
Use CSS3 to animate the input box similar to the ...
Detailed explanation of the download process of the mysql-connector-java.jar package
Download tutorial of mysql-connector-java.jar pac...
An article to help you learn CSS3 picture borders
Using the CSS3 border-image property, you can set...
Using streaming queries in MySQL to avoid data OOM
Table of contents 1. Introduction 2. JDBC impleme...
WeChat applet component development: Visual movie seat selection function
Table of contents 1. Introduction 1. Component da...
Vue SPA first screen optimization solution
Table of contents Preface optimization SSR Import...