I'm working on a WordPress website and there is already a lot of content written in both Chinese and English. So it's not a normal multilingual site where you get redirected to a Chinese version of the site and and English version.
I tried using #fontface to detect a unicode range
#font-face {
font-family: 'NotoSans';
src: url('fonts/chinese/NotoSansCJKtc-Thin.otf') format('opentype');
font-weight: 200;
unicode-range: U+4E00-U+9FFF, U+3400-U+4DBF, U+2B740–U+2B81F; /* CJK unicode */
}
and then use
body {
font-family: "NotoSans", "Nunito";
}
But then all text, Chinese and English, uses the Noto Sans font. I only want the Chinese text to use Noto Sans. Where am I going wrong with the above - Should it just not apply the Noto Sans font where unicode-range is determined and fall back onto Nunito font for outside that range?
Alternatively,
Or should I try using javascript to detect unicode-range and apply a span with specific class? But would that wrap every character in the span?
if(/^[\u4e00-\u9faf]+$/ || /^[\u3400-\u4dbf]+$/ || /^[\u2b740-\u2b81f]+$/)) {
// add span around
}
Here's an example text:
協辦單位：黃霑書房、Every Life Is A Song 一個人一首歌
so then I want,
<span class="chinese-font">協辦單位：黃霑書房</span>、Every Life Is A Song <span class="chinese-font">一個人一首歌</span>
Is that a better solution? How would I write the javascript code?
Related
Only sometimes, I get a PDF rendered from Puppeter without any content:
On the picture above, we are missing all the content inside the table element, as well as the content beside NIF and Número D-U-N-S.
It is an inconsistent error, because most of the times it works properly, but sometimes not.
Here you can see the way we launch Puppeteer:
const launchParams = {
args: ['--no-sandbox', '--disable-setuid-sandbox', 'displayHeaderFooter', 'preferCSSPageSize', 'printBackground']
};
// Launch the browser and create a page
browser = await puppeteer.launch(launchParams);
const page = await browser.newPage();
requestOptions.timeout = 0;
requestOptions.waitUntil = 'networkidle2';
await page.goto(urlOrHtml, requestOptions);
await page.emulateMedia('print');
The font color is black (as I said, most of the times it works well and you can see the text).
I'm seeing the same issue. I am not sure (came here for an answer), but I have an hypothesis.
In my case, I am using web fonts, and I explicitly chose https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&family=Roboto:ital,wght#1,400&display=block, meaning I get font faces like
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
font-display: block;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1Mu51xEIzIXKMnyrYk.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
Using font-display: block. See mdn.
Also, there is no fall-back font:
body {
…
font-family: Roboto;
…
}
I really want that font, consistently, and not some fall-back.
font-display: block "Gives the font face a short block period and an infinite swap period.".
Font block period
If the font face is not loaded, any element attempting to use it must
render an invisible fallback font face. If the font face
successfully loads during this period, it is used normally.
So, the hypothesis is that, sometimes the web font loads in time, and sometimes it does not. When it does not, the invisible font is used.
I added ttf fonts to my lambda, in the hope this would force their use, as they are always available, avoiding this timing issue. But, that doesn't work.
Next, I'll try to remove the web fonts from the CSS. Will that force using the TTF fonts?
I have problem in implementing font-weight: 100.
I want the my sentence to be ultra light/thin, but when I'm using font-weight:100, is not working.
What should I do? Do I need to import or install something?
I am using reactjs.
<p class="thin">Test</p>
.thin {
font-weight: 100;
}
In order to use specific font-weight, your font must support it, if it doesn't, then any value between 0 and 600 (not included, normal value is 400) will be interpreted as normal, and any greater value will be bold (bold normally is 700).
If your font doesn't have a light/thin variant, then I'm afraid you can't get a thinner font weight than normal (400).
EDIT NOTE : For fonts than only are normal (400), then bold is generated by default by the browser, for instance :
#import url('https://fonts.googleapis.com/css?family=Roboto');
p {
font-family: 'Roboto';
font-weight: 700;
}
<p>This is bold, but I didn't loaded Roboto 700, only Roboto 400.</p>
In this case, the render may differ from one browser to another, although it usually don't.
If you select a font on google fonts you have two choices: Embed it with the default embed code or customize it (in the overlay you get after you select a font)
If you customize it you have the ability to select which font weights you want to include. not every font supports every font weight. if you can't select it, it doesn't exist for this font.
#font-face {
font-family: Sakal Marathi , Arial Unicode MS;
src: url(Saka_Marathi_Normal.ttf);
}
h3{
font-family: Sakal Marathi , Arial Unicode MS;
}
<h3>hiiii</h3>
I am desiging my project using bootstrap, vuejs, and laravel. I want to add the font sakal_marathi.ttf to my project. How can I use this font style? When I use the font-family attribute it displays the font on my PC, but the effect is not displayed on other computer.
Use any google fonts instead this.
#font-face {
font-family: 'Sakal Marathi';
src: url('Saka_Marathi_Normal.ttf');
}
h13 {
font-family: "Sakal Marathi";
}
You don't have to use two names(the first is font series name,the second is font type name),and you should check current url is true.
I have an arbitrary ttf font that I want to use in my web application.
How can I tell which characteristics like "bold", "italic" are available in this font?
Background: I want to avoid that I have to try out all the different settings like:
font-weight: bold;
font-style: italic;
in order to see which one has an effect on the appearance of the font on my web site.
Let me cut that thought short: that's not how ttf (or in fact, any) font resources work. Bold, Italic, etc are separate "physical" files on your harddisk, and the kind of style toggling you see in Office applications, text editors, etc. come from the OS showing you an abstraction: it only shows you the font family name, rather than the list of individual ttf or otf files, and then shows you style/weight UI controls, which trigger an actual font resource switch from one file to another without you ever noticing.
So: if you have a single ttf file, that file represents only one, specific , font face expression (regular, bold, italic, bold-italic, or even something more detailed based on OpenType metadata properties).
To make things even more fun: if you want to use fonts in CSS, CSS doesn't even care about what a particular font resource is. It completely relies on you to tell it what it is, and you get to lie: CSS will believe you. If you use an #font-face rule you get to say which font file to use for a particular combination of font-* properties, so you're in the driving seat:
#font-face {
font-family: MyFont;
/* CSS has no idea, nor does it care, what this font "really" is */
src: url('myfont-Bold-Italic.ttf') format("truetype");
/* so we tell it this font is applicable to weight:100, or ultra-thin */
font-weight: 100;
/* and we also tell it that this font is applicable in "normal" style */
font-style: normal;
}
And presto, as far as the page styling you just defined, using MyFont with normal style and weight 100 will load whatever ttf resource you said it should use. The CSS engine does not care or even know that the resource you told it to use is "actually" a bold italic expression of the font family. All it knows is that you said this font had to be used for weight:100/style:normal so that's what it's going to use in something like this:
body {
font-family: MyFont, sans-serif /* weight mismatch, so this will probably fall through */
}
h1 {
weight: 100; /* weight/style match: this will use myfont-Bold-Italic.ttf! */
}
2019 edit
OpenType introduced font variations (FVAR) which allows a single font to encode an infinite spectrum of variable vector graphics, which means that if the browser you're targeting supports FVAR OpenType, you can now load a single font as your #font-face instruction, with a new format string that indicates it's variable, and instead in your normal CSS indicate which specific variation you need by specifying the font-variation-settings property:
#font-face {
font-family: MyFont;
src: url('myfont-Bold-Italic.ttf') format("truetype-variation");
/* no weight or style information here anymore */
}
body {
font-family: MyFont;
font-variation-settings: 'wght' 435;
}
h1 {
font-variation-settings: 'wght' 116;
}
While "plain" CSS only supports 9 font weights (100 through 900 in steps of 100), variations can use values from 1 to 1000 in steps of 1.
Each and every font (if weights available) comes in a separate true type format file for each and every weight of the font.
e.g.
Roboto.ttf
Roboto-Italic.ttf
Roboto-Bold.ttf
Therefore, you need to specify which is which in Your CSS file like so:
#font-face {
font-family: 'Roboto';
font-weight: normal;
url('fonts/Roboto.ttf') format('truetype')/*ttf*/;
}
#font-face {
font-family: 'Roboto';
font-weight: bold;
url('fonts/Roboto-Bold.ttf') format('truetype')/*ttf*/;
}
#font-face {
font-family: 'Roboto';
font-weight: lighter;
font-style: italic;
url('fonts/Roboto-Italic.ttf') format('truetype')/*ttf*/;
}
In your case, you can view the particular file directly by clicking on it twice in the Windows/MacOS/Linux explorers.
If you want to use a third-party software solution, I suggest that you give opentype.js a look.
How to use multiple font face in single textarea?
Example:
<style>
#font-face {
font-family: 'MULLAI';
src: url('MULLAI.woff') format('woff');
}
.tamil {
font-family:MULLAI;
font-size:18px;
}
.english {
font-family:"Times New Roman", Times, serif;
font-size:13px;
}
</style>
<textarea><a class="english">Hello</a>,<a class="tamil">ïH¥Õ£L</a></textarea>
I am expecting the output should be
Hello வணக்கம்
Actually i need to include multiple languages in single text area. I tried lots of jquery editor. But its not supporting multiple languages in single textarea.
Please help me to resolve this problem. Thank you in advance.
You cannot do it. DOM cannot be insert to textarea element. You can use content editable for it. Also you can find more information here.