I made a cross-stitch pattern generator.
Some of the people who use it say that once a pattern is generated, they can't see the Unicode symbols rendered in the pattern. Here's the CSS I'm using in a sample fix to test an embedded font:
#font-face
{
font-family: FreeSerif;
src: url(Fonts/FreeSerif.ttf) format("truetype");
}
*
{
font-family: FreeSerif;
font-size: 24px;
}
Wikipedia lists the Unicode blocks that FreeSerif implements. However, some of the symbols won't render. Why might this be happening?
The pages now specify
{
font-family: Helvetica,Verdana,Tahoma,Arial,sans-serif;
}
and this is not overridden for the large table containing the stitch pattern. It is quite possible that Helvetica exists in different versions, with varying character coverage; Mac specialists might know about this. But in most computers of the world, there is no font under that name. On such computers, browsers will either use one of the other fonts, failing to display many of the characters as e.g. Verdana does not contain them, or (more usefully, and in accordance with CSS specs) scan thru the font list until they find one that contains the character being displayed and ultimately falling back to some system−dependent font.
For better predictability and robustness, you could use
td {
font-family: "Arial Unicode MS", "Lucida Sans Unicode", "DejaVu Sans",
"Quivira", "Symbola", "Code2000", ;
}
Cf. to font coverage information:
http://www.fileformat.info/info/unicode/char/25ec/fontsupport.htm
But you would really need to check that each of the fonts you list contains all of the characters you use in the table.
Other options: 1) Use font embedding (font #face) for some suitable font for which embedding is allowed—but this would probably involve considerable overhead since any font that contains all those characters is probably big. 2) Use small images instead of the special characters.
Just use CSS font priorities.
Information: http://htmlhelp.com/reference/css/font/font-family.html
Also set:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Related
I'd like to use css syntax in HTML document to set the font-family to "Arial" and font-size to 0.3cm for the whole document.
I use this code:
<style>
body { font-family: Arial; font-size: 0.3cm }
</style>
I am not sure if writing only Arial is enough, or should I write something like this?
<style>
body { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 0.3cm }
</style>
and I am also not sure if I cam use "cm" in the code, I mean it works in the browser but is it correct "code-wise" ?
thanks
font-family: Arial
This means the browser will use Arial if you have it installed on your system. If not, it will use whatever the default font is for your browser.
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif
This means the browser will use Arial if you have it installed on your system. If not, it will use Helvetica Neue if you have it installed on your computer. If not, it will use Helvetica if you have it installed on your computer. If not, it will use whatever the default sans-serif font is for your browser.
Both are perfectly valid. They just do slightly different things.
and I am also not sure if I cam use "cm" in the code
Yes, cm is a valid CSS unit of measurement.
I am not sure if writing only Arial is enough, or should I write something like this?
You can use Arial alone but It is advisable to use font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; Just is case Arial can not be used.
and I am also not sure if I cam use "cm" in the code, I mean it works in the browser but is it correct "code-wise" ?
You can use cm but It seems it is recommended only for print by w3.org,check this link http://www.w3.org/Style/Examples/007/units.en.html
The recommended units for font size are em, px, %,rem
The font-size property can accept values of type length. As of the time of writing, the exhaustive list of these types (excluding experimental units) is:
em, ex, ch, rem, vh, vw, vmin, vmax, px, mm, cm, in, pt, pc
So, yes. You can use cm (centimeters) as a unit for that property. You should be aware, though, that 1cm rarely equals one true centimeter on screen, due to differing pixel densities on various displays. If that's really what you want, you could use the mozmm unit of measurement, although it is an experimental unit that is only supported by Firefox browsers. The cm unit is used more often in stylesheets targeted at physical printed media.
The font-family property accepts a stack (comma-separated list) of font family names. The browser will use the first one in the stack that it happens to recognize (installed on the computer).
Using font-family: Arial is a pretty safe bet, since almost all computers have the Arial font, but to be safe it is best to include a couple of fall-back fonts. Quotation marks (or single-quotes) are traditionally used around multi-word font names or font names with numbers or symbols in them. It is also considered best-practice to include a <generic-name> at the end of the list. The exhaustive list of generic fonts is:
serif, sans-serif, monospace, cursive, fantasy
So, the second option you listed for font-family is a little bit more "bulletproof". It lists some fall-back options and ends with a generic font in case the client has none of the hand-picked fonts installed.
What font used when I don't have that font?
Example:
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow: 400' rel='stylesheet' type='text/css'>
<style>
body {
font: 400 30px/1.4 Arial;
}
p {
font: 700 30px/1.4 "Pt Sans Narrow", Arial;
}
</style>
</head>
<body>
<p>Example.</p>
</body>
</html>
In this example, I don't have "Pt Sans Narrow 700". What font used?
The regular typeface of the PT Sans Narrow family used, with algorithmic (synthetic, fake) bolding applied to its glyphs. In this case, the result is clearly bolder than plain PT Sans Narrow but less bold that PT Sans Narrow Bold.
CSS Fonts Module Level 3 says, in its description of font-weight: “Although the practice is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces. For the purposes of style matching, these faces must be treated as if they exist within the family. Authors can explicitly avoid this behavior by using the ‘font-synthesis’ property.” (The font-synthesis property is not supported yet.)
Unless there is some very special reason to ask for “fake bolding”, despite the existence of an actual bold typeface, you should specify bold (700) weight in the element where you refer to the the Google font, as instructed by the Google documentation:
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700'
rel='stylesheet' type='text/css'>
You are using google font that means it obviously take this font. But if you haven't used google font then if the client has no such font then it would take another font that is Arial.
Consider this example:
font-family: font1,font2,font3;
Here if the client browser has no such font font1 then it will try to use font2 and if font2 is still not available then it will use font3 but if font3 is not still there the client's default font would be used there.
Arial is used if Pt Sans Narrow is not present.
When you open a HTML-File and the browser can't find the font, the normally it will use the default font of the browser.
What will happen is it will look at the declared font stack you have made:
"Pt Sans Narrow", Arial;
and see the next font in the list after the one it cant find "Pt Sans Narrow".
In this case it will be Arial.
This is highly depending on the rendering engine you are using.
Most engines make the font that is available "Pt Sans Narrow" just bold, which in turn would not look like the correct "Pt Sans Narrow" 700, but might come close.
And then there are those engines that skip an not available font and would choose the next in line, that might be Arial if it is available or the devices default font if the device also doesn't have Arial.
I want to make Kannada website in that I have lot of content so that till now I'm using google kannada translator to add but now the content is more so is their any way to do embed kannada font I tried this link http://www.google.com/fonts/earlyaccess but I couldn't get it.
I tried like this:
#import url(http: //fonts.googleapis.com/earlyaccess/notosanskannada.css);
font-family: "Noto Sans Kannada Regular", serif; font-size: 19.0px; line-height: 1.11em;
There are three problems with the code you’ve used: a space in the URL of the Google CSS file (URLs must not contain spaces), the font name Noto Sans Kannada Regular (the Google CSS file defines Noto Sans Kannada), and the appearance of the font-family declaration as such (it must appear within a CSS rule, consisting of a selector, the { character, a declaration or declarations, and the } character). The following works:
<!doctype html>
<meta charset=utf-8>
<title>Kannada test</title>
<style>
#import url(http://fonts.googleapis.com/earlyaccess/notosanskannada.css);
body { font-family: "Noto Sans Kannada", sans-serif; font-size: 19.0px; line-height: 1.11em; }
</style>
Hello world!
<p>
ಮುಖ್ಯ_ಪುಟ
The last line of the sample code is Kannada text and may or may not be legible here, depending on fonts installed in your system. On a web page, it will be legible thanks to the use of a downloadable font (via the Google CSS code) – unless the user has denied the use of downloadable fonts, which is rare.
I changed serif to sans-serif, since it is illogical to use a serif font as fallback font when the primary font is a sans serif font like here.
Note: Normal text will appear in regular typeface of Noto Sans Kannada, and bold text (as in headings by default) in bold typeface of Noto Sans Kannada. You should not use italic (like em element) for elements that may contain text in Kannada to be displayed using this font. The reason is that Google does not provide an italic typeface (as you can see by looking at its CSS file), and this makes browsers generate “fake italic” by algorithmically slanting glyphs, which is bad typography.
Basing on your experience in frontend and web applications, can you provide good and solid source or list with web-safe fonts? Or any other good tool ensuring font safety in web browsers?
Most of the time I was using Squirrel Fonts but a lot of fonts, which my designers use, are blocked there and the only way I can show them are PNGs.
There's no absolute safety, unless you're going with generic classes like "serif", "sans-serif" etc.
Here are some resources that can give you an idea about the most prevalent fonts:
https://web.archive.org/web/20160610001431/http://www.awayback.com/revised-font-stack/
http://cssfontstack.com/
You'll see that no single font exists on all operating systems. The best thing you can do is to use a font stack that covers the greatest percentage and hope for the best. Using a sensible font stack is the way to go...
You can generator font from here also http://www.font2web.com/ & you can use Google fonts also http://www.google.com/webfonts
There is no definitive list of web safe fonts that I have found. The research gave me some basic idea but then I had to experiment on my own machines. I wanted something that would work on Windows, Mac, and Linux machines. Luckily I had one of each.
There are 5 types of fonts recognized by HTML, namely serif, sans-serif, monospace, fantasy, and cursive. However, I see 6 types myself, being as cursive breaks down into scripts and handwritten fonts in my mind. What I came up with for 'web safe' font stacks is as follows:
/* Web Safe Font Stacks */
.head { font-family: Georgia, 'Times New Roman', serif; } /* H1-H6 */
.para { font-family: Verdana, Arial, sans-serif; } /* Paragraphs, body text */
.mono { font-family:'Courier New', Courier, monospace; } /* code, pre, etc. */
.fant { font-family: Papyrus, Impact, fantasy; } /* Fantasy */
.curs { font-family:'Apple Chancery', 'Lucida Calligraphy', cursive; } /* Cursive */
.hand { font-family:'Comic Sans MS', Chalkboard, cursive; } /* Handwritten */
I hope that helps...
The list of “safe” fonts, if that means a list of font names that will give you the desired rendering in all situations, or even in almost all situations, is exactly the empty list.
Most purported lists of “web-safe fonts” fail immediately if you test them on Android, for example.
If you actually meant to ask about the problems of using embedded fonts (with #font face), I suggest that you check the previous questions and answers on them first.
My HTML text is just like this:
<p>abcdefghijklmnopqrstuvwxyz</p>
What I want is to display a-n using "Times New Roman", and display o-z using "Courier New", and this should be done using CSS, say, with no change to the HTML text.
Simply stated, I want CSS to automatically choose the specified font corresponding to which character it is.
a-n should be displayed using "Times New Roman";
o-z shoule be displayed using "Courier New".
Is there any way to accomplish this?
If this problem can be solved, another problem can be solved: display different language using different font.
Yes you can, using something called unicode-range It works in all modern web browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
BTW, more info about this from http://24ways.org/2011/unicode-range
Live example: http://jsfiddle.net/jfcox/3LQyr/
<style>
#font-face {
font-family: Foobar;
src: local('Times New Roman');
unicode-range: U+61-6E;
}
#font-face {
font-family: Foobar;
src: local('Arial');
unicode-range: U+6F-7A;
}
body{
font-family:Foobar;
}
</style>
<p>abcdefghijklmnopqrstuvwxyz</p>
If the characters belong to different writing systems, such as Latin and Hebrew, or Cyrillic and Greek, browsers often automatically use different fonts for them. However, this only happens to the extent that the page does not specify fonts, i.e. this relates to default fonts only, and the fonts used are determined by browser defaults and browser settings controlled by the user.
Although the technique described in JayC’s answer gives a partial solution, you get much better browser coverage by distinguishing the texts in different languages in markup. In a bilingual document, it suffices to use markup for texts in one of them (the one used less, for practical reasons). Using class as in gutch’s answer gives best coverage, but nowadays support to language selectors in CSS is so widespread that you might consider using the more logical lang attribute instead, e.g.
<h1>Hello − <a lang=ru>Привет</а></h1>
Then you would use rules like
[lang=ru] { font-family: ...; }
(My example uses an <a> element effectively as a shorter variant of <span>. Formally, this is possible only when the text is not inside an outer <a> element.)
However, for visual style, just the opposite of font selection by language would be needed. It really looks odd if the “e” in “Hello” is different from the Cyrillic “е” in “Привет” on the same line. It is almost always better to use the same font for all languages in a document, if possible. This means selecting a font that works for all of them.
You can't use CSS to change the font of particular characters as you describe, because the CSS selectors don't select individual characters — they select HTML elements.
So you would need to create elements around the blocks of text that need specific fonts. Ideally you would do that in server-side code, though I don't know whether that's practical for you. Your server would need to output HTML like this:
<p><span class="languageOne">abcdefghijklmn</span><span class="languageTwo">opqrstuvwxyz</span></p>
Then you apply the fonts as appropriate in your CSS:
.languageOne { font-family: "Times New Roman", serif; }
.languageTwo { font-family: "Courier New", monospace; }