CSS: how to have different sizes for each font

I have a site that uses "arial narrow". To avoid compatibility issues, I made a version of the @ font-face font of this font using the Font Squirrel font generator ( http://www.fontsquirrel.com ), but when I am on a system that does not have its own "Arial Narrow", and then it is downloaded via the Internet via @ font-face, the font is larger than its own "Arial Narrow"; I use absolute size in px for fonts.

Is there a way to set different sizes for the native and online font?

@font-face {
font-family: 'ArialNarrow';
src: url('/fonts/arialn-webfont.eot');
src: local('☺'), url('/fonts/arialn-webfont.woff') format('woff'), url('/fonts/arialn-webfont.ttf') format('truetype'), url('/fonts/arialn-webfont.svg#webfontNZumFher') format('svg');
font-weight: normal;
font-style: normal; }

and below:

font-family: 'Arial Narrow', 'ArialNarrow', arial, helvetica, sans-serif;
font-size:14px;

Thanks in advance for my bad english

+3
source share
2

CSS 2.0 CSS 3 font-size-adjust, . IE (!), Fx 3.0+ afaik Saf 4 Op 10.5.

, Arial Narrow ( ), , Arial Narrow Ascender Microsoft : http://www.fontslive.com/font/arial-narrow-regular.aspx ( Monotype).
- http://en.wikipedia.org/wiki/Core_fonts_for_the_Web , (2002) : embedding .

+1

, , " " ( , , @Felipe CSS - ).

JavaScript, , .

: JavaScript

0

Source: https://habr.com/ru/post/1750835/


All Articles