I am currently trying to make a website in greek.I have set the lang="el".I also use brackets to code.When i use the live preview of brackets which uses Google Chrome everything is fine.When i open the index.html from google chrome without using brackets it's also fine.
The problem is when i try to open it to any other browsers.From greek it turns each letter to weird symbols.
By the way i use the Lato font-family.Tried using only Arial but still symbols appeared but different ones.
Anyone has any idea what's the problem?
html {
background-color: #f0f0f0;
color: #5f5f5f;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;}
This is how the weird symbols look
For some languages you can just slap text-transform:uppercase and it will work. For greek you have to declare the language in the HTML, so you should add lang="el" to the HTML tag and define the charset as UTF-8 using <meta charset="utf-8" /> .
It will also solve the issue I was having, which is the CSS text-transform:uppercase adding accents to uppercase greek characters.
Related
The Problem
I've made a website for myself, using the Express framework for NodeJS, and it works pretty much as I'd hoped it would.
One remaining irritation is how best to provide support for the more obscure scripts and alphabets the world has to offer.
At present, I'm using a version of the Computer Modern font, using these files specifically, which I import via CSS in the following code:
#font-face {
font-family: computerModern;
src: url("fonts/cmunrm.ttf");
}
#font-face {
font-family: computerModern;
src: url("fonts/cmunti.ttf");
font-style: italic;
}
#font-face {
font-family: computerModern;
src: url("fonts/cmunbx.ttf");
font-weight: bold;
}
#font-face {
font-family: computerModern;
src: url("fonts/cmunbi.ttf");
font-weight: bold;
font-style: italic;
}
...
body {
font-family: computerModern, serif;
padding-left: 20px;
padding-right: 20px;
}
This approach has worked quite well so far - up to a point. The Latin alphabet is printed beautifully, as are the Greek and Cyrillic alphabets. Arab text also looks pretty, although, looking through the character lists of the .ttf files, my browser must just be pulling out its default Arabic font; as luck would have it, the default Arabic font complements Computer Modern rather well. But I begin to run into more serious difficulties when I want to print, for example, people's names in their native Georgian characters, e.g. სალომე ზურაბიშვილი = Salome Zourabichvili. The correct characters are printed, but my browser's default Georgian font is hideous when side by side with Computer Modern.
Potential Solutions
How should I add support for the Georgian alphabet, and other obscure scripts, so that characters are printed in a font which dovetails with aesthetic of the rest of my website? I can think of four potential solutions, two of which I'd know how to implement but are unsatisfactory, and two of which I don't know how to implement.
Known but Unsatisfactory Solutions
Replacing the current .ttf files with files which cover all the desired characters. Unsatisfactory because I can't find such files.
Creating a new HTML tag of the span class for each obscure alphabet, any wrapping any text of that alphabet in such a tag. Unsatisfactory because the website has thousand of pages, with new ones being added all the time, and don't trust myself, let alone anyone else, to remember to use the appropriate tags.
Solutions I Don't Know How to Implement
Splicing .tff files, i.e. copying characters from a.ttf to b.ttf.
Adding characters from multiple .ttf files to one CSS font-family, and with the same font-style, font-weight, etc.
Why dont you target the html lang and load different fonts per language if needed?
Example:
html[lang=ja]>body {
font-family: 'Yu Gothic', Arial, Helvetica, sans-serif;
}
html[lang=ko]>body {
font-family: 'Noto Sans KR', Arial, Helvetica, sans-serif;
}
html[lang=zh]>body {
font-family: 'Noto Serif SC', Courier, Georgia, serif;
}
Regards
How can I test if a particular web font contains a particular Unicode character? I can't simply include the character in some text, because a browser's font substitution mechanism may choose another font to display the character.
EDIT
This is the best solution I have been able to come up with so far:
First, you must download the LastResort font from Unicode: https://www.unicode.org/policies/lastresortfont_eula.html. (This is a bit tricky - I kept getting "network error", but in the end I succeeded.)
The LastResort font allegedly has a replacement icon for every Unicode character.
Now, let's assume that I want to check if the Google fonts "Pacifico" and "Merienda" contain the Unicode characters F and Ф (Unicode character 0424). I can use this code:
<!DOCTYPE html>
<html>
<head>
<title>Font detect</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merienda">
<style>
#font-face {
font-family: 'LastResort';
src: url('LastResort.ttf') format('truetype');
}
p.pacifico {
font-family: Pacifico, LastResort;
font-size: 60pt;
}
p.lato {
font-family: Merienda, LastResort;
font-size: 60pt;
}
</style>
</head>
<body>
<p class="pacifico">F Ф</p>
<p class="lato">F Ф</p>
</body>
</html>
This will display thus:
For Pacifico, both F and Ф are displayed, but for Merienda the Russian character Ф is replaced by a default icon from LastResort. So Pacifico contains Ф, Merienda does not.
Now, I don't know if this is a foolproof method, and I don't know if there is a simpler way to do it.
Wakamai Fondue is a tool that will tell you about which characters a font contains. It'll also tell you about any OpenType feature inside the font, and some more details. (Full disclosure: I wrote that tool)
If you want to check it at the client side, I think there's no way around trying to render the character and then check if it's actually been rendered. If you use Adobe Blank as a fallback font you could check if it rendered the character (width would be > 0) or not (width would be 0).
I’m writing a small static site (HTML and CSS) and stumbled about a behavior in the property font-family, which I don’t understand. I like to write my code consistent with a nice and clean look, that’s why always quote fonts in CSS.
As far as I understand the CSS2.2 specification correct, quoted fonts are allowed:
Font family names must either be given quoted as strings, or unquoted
as a sequence of one or more identifiers.
Unfortunately, it’s not working properly in my case. I attached an example below.
.test1
{
font-family: 'sans-serif';
}
.test2
{
font-family: 'arial';
}
.test3
{
font-family: sans-serif;
}
<h1 class="test1">Test</h1>
<h1 class="test2">Test</h1>
<h1 class="test3">Test</h1>
I tested the property with Google Chrome 54.0.2840.99 and Internet Explorer 11.0.9600.18450. Why is the quoted font for arial working but not for sans-serif?
Sans-serif is not the name of the font but the font type...
In order to make a font work, you have to type at least the font name!
Font name in required.
Ex
.myclass{font-family: 'myFontName', sans-serif;}
family-name - The name of a font-family, like "times", "courier", "arial", etc.
generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
Source
I'm using the Amatic SC 700 normal from google fonts.
This is the link on google fonts : https://www.google.com/fonts/specimen/Amatic+SC .
The issue is that right now the char ? is converted in ® .
The css code I used is:
#import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);
body {
font-family: 'Amatic SC', cursive;
font-style: normal;
font-weight: 700;
}
The html looks like this :
<html> ???? </html>
This is a screenshot of the issue :
This is the jsfiddle link: http://jsfiddle.net/m4vev43a/
I tested this issue on:
Chrome Version 42.0.2311.90
Firefox 37.0.1
Opera 12.16
Any idea how I can fix this?
Are my browsers getting crazy?
Or it's a bug in the font?
Update:
When using :
#import url(http://fonts.googleapis.com/css?family=Amatic+SC);
So without the suffix :400,700 the question mark character is displayed properly.
Unfortunately using the above code + bold text is totaly messing up with the letter spacing in Chrome, Firefox, Opera.
This is a known issue with the bold version of the Amatic font, as can be seen in this bug report from November, 2011. Your font was implemented correctly, it's just that the font file itself has a bug.
A workaround is to use the regular variant for question marks. I know that's hardly a great solution but it seems there's not much else you can do.
One possible workaround I've used to recover this situation.
Note: is not perfect if you need to trust the letter spacing for each browser.
Actually the idea is :
define again the Amatic font in addition the std one, but without the :700
generate a special class to handle just the sentences with the question mark
#font-face {
font-family: 'Amatic';
src: url(http://fonts.gstatic.com/s/amaticsc/v6/DPPfSFKxRTXvae2bKDzp5FtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/amaticsc/v6/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
.has-question-mark {
font-family: Amatic;
}
I'm facing this problem,
If opened in IE9 under windows 7, in my pre formatted html block \ is rendered as wong symbol ₩ if courier font is used. If I set Tahoma, e.g. it's ok. In chrome, even if courier is set, symbol is rendered as backslash.
How to fix it?
Edit: code that reproduces this:
<html><head>
<style>
pre {
margin-top: 10px;
padding-left: 7px;
padding-top: 5px;
margin-left: 50px;
font-family: courier;
background-color:#ddd;
}
</style></head><body>
<pre>
Can\'t
</pre>
</body></html>
I cannot reproduce the problem on my Win 7, so I still suspect the reason is that your system has an actual font under the name “Courier” (normal Windows 7 is not shipped with such a font). Either that font is broken regarding the backslash, or it simply lacks it and the browsers picks up the character from another font. In the latter case, that font might be broken.
There are surprisingly many fonts that have a glyph for “₩” U+20A9 WON SIGN where they should have a glyph for backslash. There has been some speculation about the reasons. But the point is that there should be no reason why such a font would be used unless your browser resorts to picking up backup fonts. In that case, IE might have been set to use e.g. Batang Che as the default monospace font – and it’s one of the fonts with that problem.
On the practical side, “Courier” should almost never be used. In systems that have a font under such a name, it is often a bitmap font that looks rather bad especially when font size is changed. Use “Courier New” instead. Or something better, such as
pre, tt
{ font-family : Consolas, Lucida Console, Courier New, monospace; }
As Raymond Chen pointed out in the comments, the browser has likely guessed the encoding incorrectly.
If you want to specify the encoding directly in the file, then you can use a meta tag in the head element of the page, like this:
<meta http-equiv="Content-Type" content="text/html; charset=my_encoding_here">
Where my_encoding_here is actually a string representing the encoding you used when creating the HTML. Common encodings are utf-8 and ISO-8859-1, but you should figure out exactly which encoding your editor is using and make sure you match it.
If you're serving pages like this, then you might choose to specify the encoding in your webserver, which will put the information into an HTML header when it returns the page.