How to specify default font family for Chinese-English web page.

[W3_Bill]

I have a few web pages that contain a mix of Chinese and English text.  I know from the W3Schools CSS "Fonts" page how to specify the default font for a web page containing English text only, so that I get Times (serif) regardless of the browser and operating system.  But how do I also set the default font for Chinese text so that I get, in all browsers and on all operating systems, something looking very closely like what my home workstation (a Fedora system) calls "AR PL UKai CN"?

I see in wikipedia that what on my Fedora system is "AR PL UKai CN" can be called "kaiti", "kaishu", "zhengshu", "regular script", "zhengkai", and possibly other names.  What are the correct "font family" and "generic family" names for "AR PL UKai CN" to use in the CSS "font-family" property?  What I'm looking for is like the middle column in the attached png image, which came from "https://en.wikipedia.org/wiki/List_of_CJK_fonts".

Thank-you in advance for your help.

Bill.

[Ingolme]

You're restricted to whichever fonts are installed on the user's computer. You can list any number of fonts in your font-family declaration, but you have to specify a generic font for if the user does not have any of them. The generic fonts are serif, sans-serif, monospace, cursive, fantasy and system-ui.

Your font declaration could look something like this, assuming that all of these are names of fonts that look the way you want them to.

font-family: "AR PL UKai CN", "regular script", "kaiti", "kaishu", "zhengshu", "zhengkai", cursive;

From the style of font you've shown, cursive probably matches it best, but on Windows cursive tends to be Comic Sans, so you might want to use serif instead.

[W3_Bill]

Ingolme, I think a key part of the question was missed.  A web page has both English text and Chinese text.  How do I specify one font family for the English text, and a different font family for the Chinese text, using at most two font-family specifications, each applicable to the whole page?

[Ingolme]

The text of each language should be wrapped in an element with a class or some other attribute to define the language. For semantic reasons, you can use lang="en" for English and lang="ch" for Chinese, then you can select all elements of the language and give them a specific font family.

If you use the lang attribute to define the language contained in an element then you can use the :lang() selector as in the following CSS:

:lang(en) {
    font-family: [English fonts]
}

:lang(ch) {
    font-family: [Chinese fonts]
}

 

[W3_Bill]

Having read your posting, I went to the W3Schools site and studied the "lang" feature, and dug in more to UTF-8, and related topics.  I played around some with "lang".

Take a look at the attached screen-capture.  It shows an x-term in which I used the Linux "cat" command to display a file with mixed Chinese and English.   Notice that the English and Chinese are mixed within a single sentence as well as within a single paragraph.  My apologies that when I launched this thread, I did not realize that it would be relevant that the Chinese and English are mixed within a paragraph, and even within a single sentence.  My playing around shows that it does matter.  My hope was that for the whole web page, I could specify one font family for all English text on the page, and a separate font family for all the Chinese text on the page, and the browser's rendering engine would know from the (UTF-8?) character codes which font family to use without me telling it what text is Chinese and what text is English.   Is there any way of handling this other than using "span"?

I also played around with the font-family itself.  I tried each of "regular script", "kaiti", "kaishu", "zhengshu", "zhengkai", and cursive, all also with spaces and dashes as well as one word.  I also tried "serif", "sans-serif", and "monospace" as well as "cursive".  The only way I can get a kai-like font is to use "ar pl ukai cn".  I checked my workstation's font tool to look for family or generic names.  No luck.  I also tried looking in the W3Schools references.  If an answer is there, I missed it.  Any ideas?

[Ingolme]

You would need to wrap each of the Chinese words in an element, <span> or anything else, which has a lang="ch" attribute.

[W3_Bill]

After previously playing around with "lang" quite a bit, I had the feeling that "<span>" would end up being the answer.  My newest round of "playing" with this shows me that "<span>" is the only thing that works.  It think it was you (Ingolme) that introduced me to "<span>" in some previous thread.  Now back to "font-family"....

In biology, one way living things are organized is by "taxonomy".  A common taxonomy of living things goes like this: "life - domain - kingdom - phylum - class - order - family - genus - species".  When I look at the W3CSchools page on font-family, my impression is that there is a "taxonomy" for fonts.  So "Times New Roman" is a detailed-level name (like genus or species), "Times" is an intermediate-level name, and "serif" is a high-level name (like domain or kingdom).  It seems the list you gave earlier ("generic fonts are serif, sans-serif, monospace, cursive, fantasy and system-ui") is high-level (like domain or kingdom).  I understand that "AR PL UKai CN" is a detailed-level name (like genus or species), and probably won't work on most non-Linux systems (and even some Linux systems).  What is the "taxonomy" for "AR PL Ukai CN"?  ...or what is the taxonomy of Chinese fonts?  I've tried many things, none have worked.  I've searched, no luck.  I'm surprised at how difficult this has turned out to be.

[Ingolme]

There isn't a taxonomy for fonts, just categories.

The two main types of fonts are serif and sans serif. Serif fonts are decorated with little lines off the tips of the letters. These little decorations are called "serifs". sans serif fonts do not have these decorations, from French "sans serif" meaning "without serifs."

Almost all fonts fall under the serif or sans serif categories, but there are a few other categories for the less common fonts. Cursive fonts are ones that look like handwriting or calligraphy and fantasy fonts are very decorated and stylized. The final category is called system-ui and it's for fonts that have things like math symbols and windings.

Those are all of the generic categories of fonts. You can't guarantee that a font will look exactly the way you want it to, but you have to specify a generic font so that, if the user does not have your preferred font installed, the browser has an idea of the category of font you intended to use and select an appropriate one.

The font-family rule allows you to specify multiple fonts, this is so that you can tell it to search for other similar fonts (that you know of) in case the main one you were looking for is not available on the user's computer. An example might be the classic font-family: Arial, Helvetica, sans-serif (some people might tell me Helvetica should go first, but that's a matter of preference). Windows computers generally have Arial installed, while the most similar font to it on a Mac is Helvetica. If the computer does not have any of the two installed, the "sans-serif" tells the browser to find any san-serif font it has available.

If you want to make sure people see something similar to the font you want, you should look online for the name of a few fonts that are installed on a majority of computers which look similar enough to your font and add it to the font-family list.

[W3_Bill]

There is a hierarchical organization of fonts, but hardly anyone calls it a "taxonomy".  I am not aware of a formal accepted term for that hierarchical organization.  I chose the term "taxonomy" because readers would understand what I meant, though it might not be the accepted term.  The "generic family"  list you gave in your first reply is probably the first, highest level breakdown of the hierarchy.  "Times",  "Courier", "Deja Vu Sans", "Deja Vu Serif", "Free Mono", etc. are likely in the next level.

My searching took me to the W3C site, and this web page: "https://www.w3.org/TR/css-fonts-4/".  Your first reply was correct in saying that "cursive" is the correct "generic family" for kaiti fonts.  Since my last post, I've realized that in my "playing around", I've been putting "generic family" values in quotes.  Those values are "keywords", and must not be in quotes.  (I found that out in the that same W3C web page.)  So I did yet more "playing" today.  Unfortunately, it still doesn't work.  I'm now thinking the problem is likely to be in Firefox.  I've posted a question there.  From that, I'll see if a bug needs to be filed against Firefox.  I'll post something here if/when I get something useful from Mozilla.

[W3_Bill]

I have submitted bug # 1523688 against Firefox to address this issue.

[W3_Bill]

Results of all the above...  When mixing languages within sentences,

• "span" is needed.
• the "lang=___" is needed within the spans.
• font terminology is somewhat confusing, as is the hierarchal organization of fonts.  (not W3Schools' problem or fault)
• part of my problem was my Firefix "about:config" settings.  they were overriding html/css font settings.
• the generic font for kaiti fonts is "cursive" (without the quotes).  The font-family is "kaiti" (should be in quotes).

Two long-term suggestions:

• a W3Schools page teaching best practices for mixing languages within sentences/paragraphs, etc. in (x)html web pages.
• a page showing the hierarchal organization of fonts would be a big help.  the page should include generic font names and font-family names.  I saw somewhere that there are thousands of fonts, so I understand such a page would take a lot of time and effort.

Firefox bug 1523688 was a false alarm and is closed.  I consider this thread closed.  Thank-you, Ingolme, for your help.