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

Source: Internet
Author: User

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:

    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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.