How to display English phonetic symbols on the webpage (with examples)

The education website will encounter this problem:How to display a phonetic symbol on a webpage?Why is the phonetic symbol displayed as a random character?? And so on. This problem was also encountered when I made an English page of Hu Jiang network two days ago. So, let's share it here after solving the problem.

Can I solve the problem by using the ISO Latin-1 character set?
How to display the English phonetic alphabet on the page

At the beginning, we first thought of using the ISO Latin-1 character set to solve the problem.

What is the "ISO Latin-1 Character Set "? For example, if you want to represent the symbol ">", use the character "& gt;" or the character "& #62 ;", "& nbsp;" is used to indicate spaces. This effectively prevents some special characters from being incorrectly parsed by the browser. But if it is used as a phonetic symbol, can the problem be solved?

• Consonants: θ, yellow, t-weight, d-weight, and yellow
• Short Vowels: upper, lower, and lower
• Long Yuan sound: Audio:, audio:, audio:
• Dual vowels: e-grams, upper-right, lower-right, middle-right, lower-right, and lower-right

I believe many of my friends can see that the above phonetic symbols are normal. It seems that the problem has been solved. But ...... When we move to IE6, the problem occurs --

How to display the English phonetic alphabet on the page to continue searching for solutions

Although IE6 is annoying, there is still no way to ignore it. Therefore, we can only continue to look for solutions. There must be a page showing the phonetic alphabet for a guy like wiki. Let's see what they do. Finally, we found the phonetic template of the wiki on this page (the wiki page may not be accessible for most of the time. If you insist on accessing it, please go over the wall ). It is not difficult to analyze the problem. You only need to select the appropriate font to solve the problem. So the final solution came out. Set "IPA" class for the container that needs to display the phonetic alphabet, and then set the IPA style:

.IPA{

    font-family: "Segoe UI", Verdana,Lucida Sans Regular,Lucida Sans Unicode,Arial,sans-serif;

}

In this way, the problem is solved, IE6--IE8, FireFox3, Opera, chrome browser verification passed.

A complete instance is attached.

Click here to go to the English Phonetic Alphabet instance page.