[Feature Request] Provide a custom style sheet for the Japanese version of the page.
Closed this issue · 3 comments
I am checking the HTML created by the site generator in my browser, but on Windows 10 Japanese version, the default font of the browser is Meiryo, so it looks like the below:
(Note that the Colombian flag is not displayed!)
As a guess, the following presentation may feel better to the person building the site:
On the other hand, when I checked the display on the smartphone, the text was legible and the Colombian flag was displayed, but I found that this was because of the use of the Noto font series implicitly installed on the device, as shown below:
Based on the above, I suggest that the Japanese version of the page display characters in Noto Sans JP and Noto Color Emoji, just as the smartphone version does. These are Web fonts, so they can be used without having to be hosted on your own server.
ex)
<!DOCTYPE html>
<html lang="ja" class="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>p5play</title>
<link rel="icon" href="/assets/p5play_logo.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Color+Emoji&display=swap" rel="stylesheet">
<!-- snip! --->body {
font-family: "Noto Sans JP", "Noto Color Emoji", "Yu Gothic", "Hiragino Sans", sans-serif;
}Thanks!
Good idea! I will edit the lang/build.js script to add that font to the generated html.
Since you are busy working on the module side, I tried to do some work on my end.
For h1 and h2 tags, Mont font is preferred.
Fixed an unwanted scroll gutter is shown in the top navigation area when narrowing a PC browser's width.
How it looks on the iPads.
How it looks on the iPhones.
I will create a PR for this commit later, so please let me know if there are any undesirable implementations.
Thanks!
fixed by pr #34