We Keep Coding

HTML input font-size is greater when defined as inherit

I am using Chrome and default font size is 16px as default.
I have an idea to adjust font-size according to screen width via media queries.
I saw some CSS experts adjusting default 16px font size to 1.6rem based system.
So idea behind scence is to equalize 1rem to 10px and use everything as rem then if needed to adjust something change only font-size so all measurements will change at same ratio.
See this example
* {
font-size: inherit;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>Hello</p>
<input type="text" value="Hello">
Can anybody explain why font-size in input is greater than p ?
Also if I try to obtain font-size in dev tools I can't get any value.
If I try to get it via JavaScript like this
document.getElementsByTagName("input")[0].style.fontSize
I get ''

You get a null result on looking at the style because the inline style has not been set.
The two Hellos are not different font sizes - both are 16px, but the paragraph is Times New Roman and the input it Arial - set by the default within the browser, at least on my inspection in Chrome/Edge on Windows10.
It is worth using your browser's inspect facility to see exactly what is setting each of the styles, and it will show you the computed style as well.

How do I change fonts depending on language in same paragraph?

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?

CSS: How to tell the features a certain ttf font has?

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.

Quickly switch between rems and pixels in a stylesheet

I set initial font-size of body to 62.5% so to be equal to 10px. Then I set elements font-size to 1.2rem, 2rem and so on. Everything works fine.
Now I want to set pixels instead of rems for IE8, not to be bothered too much by dealing with its quirks. So, I add a new ie.styl file that I conditionally attach if it's IE. Inside it I want to change rems to pixels wherever rems are in original file. My question - is there some good way to do it in automatic manner, like what nib does for browsers-specific prefixed CSS options?
So, as a result, I add something like font-size units(1.2) in original file, and it generates two files - style.css and ie.css, where font-size: 1.2rem; will be in first file, and font-size: 12px; in the former one?

Best you can do is declare both, IE will use the fallback
.font {
font-size:16px; /* ie fallback */
font-size:1rem;
}

Different font sizes on website

My website has a menu named Font Size. Basically its an option for user to change font size of website like:
smaller
small
medium
large
Default font size is "small". When user selects font size say "medium", then font size should remain medium throughout user's visit to all pages of that website(in one browser session). How to achieve this through JavaScript or jQuery or anything else.
I tried changing font size on selection but when I go to another page font size changes to default font size.
My website already using HTML5, CSS3, JavaScript, Jquery. Its on Spring MVC/Java.

In an ideal world, you would have all over the elements on your page based on a percentage of the body font size, e.g.
body{ font-size: 12px; }
h1{ font-size: 120%; }
or
h1{ font-size: 1.5em; }
If you had this set up, then you can simply change the font-size of your body element, and this will then automagically update all the fonts on the page.
As Baadshah has suggested, you can use the jQuery cookie plugin to persist your users selection across all pages.
I have put together a simple demo here at jsfiddle
You can change the body font-size based on the selection, set the cookie, and then check to see if this cookie exists, then set the font size.
if ( $.cookie('font-size') ){
console.log($.cookie('font-size')); // take this out when not debugging
$('body').css({ 'font-size': $.cookie('font-size')});
}

use cookies
var cookieFont = $.cookie("fontSize");
$("#target").css("font-size", curFont + 'px');
DEMO