In some html documents I'm using webfonts for only a couple of words. Performance-wise loading a complete font-file seems wasteful. This is where the unicode-range parameter of the #font-face declaration comes in:
http://www.w3.org/TR/css3-fonts/#unicode-range-desc
With it I supposedly can define what characters of the font-file to load, thus improving performance greatly.
But I just can't get it to work. And the odd thing is that it diplays all the characters in firefox, and it fails to load the font in safari just if I include the unicode-range parameter in my declaration.
Any help would be appreciated, below is the html I was testing it with:
<!doctype html>
<html lang="en">
<head>
<style text="text/css">
#font-face {
font-family: 'dream';
src: url(Fonts/Digital-dream/DIGITALDREAM.ttf) format("truetype");
unicode-range: U+FF21;
}
*{
font-family:dream;
font-weight:normal;
}
</style>
</head>
<body>
<p>ASDWEWQDSCF</p>
</body>
</html>
You are misunderstanding the purpose of that value. From that page:
This descriptor defines the range of Unicode characters supported by a given font
So this isn't the glyphs (or characters) to download, this is actually telling the browser what characters are in the font so that the browser can determine if its even worth downloading the font in the first place. If the text being styled isn't in the given unicode-range then the font won't be downloaded.
Example XIII on the page you reference shows a great example. Imagine 3 #font-face rules that share the same font-family attribute. The first rule, however, points to a giant 4.5MB TTF file that has every possible glyph needed. The second rule lists a much smaller 1.2MB TTF but says to only use it only if all of the characters fit into the Japanese glyph range. The third rule lists a very small 190KB file that can be download if the text being styling is only roman.
Related
Some Chinese characters on my website renders in Bold. I have no styles attached or elements within the <p> element. This happends only on FireFox
I tried setting content-language to
<meta content="ch" http-equiv="content-language">
and also tried adding the font SimSun as mentioned here
Can you guys please check this and let me know your thoughts here
If you're like me, your eye will be twitching by the end of reading this. I don't blame you.
Our client has requested us to develop a responsive HTML email template, with two specifications:
Using as few images as possible
Using as many "fancy css-enabled features" as possible. Mostly, this just means rounded corners on boxes.
This question is specifically about executing the rounded corners. Gmail and Apple support CSS rounded corners, and Outlook requires vector graphics. For the remaining platforms, they're ok with using square edges.
Here's how we're detecting and executing outlook:
<!--[if mso]><v:shape>...</v:shape><![endif]-->
Works like a charm, even back to Outlook 2000. The problem is, I can't figure out how to create a fallback. Intuition says this:
<!--[if !mso]>...<![endif]-->
but it just gets ignored outright as a comment by most other email clients, and then corners are missing from the boxes altogether. I ask you, fine members of the SO community: is it possible to deploy markup for all platforms except MSO? Perhaps there's a more clever way to accomplish this that I haven't considered? Or is email HTML still too stone-age to attempt something like this?
Found a solution after much brain-wracking. Instead of this:
<!--[if mso]><v:shape>...</v:shape><![endif]-->
<!--[if !mso]>[fallback goes here]<![endif]-->
This works very well:
<!--[if mso]>
<v:shape>...</v:shape>
<div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->
[fallback goes here]
<!--[if mso]></div><![endif]-->
All it does is wrap the fallback in an invisible div in MSO, and deploys the vector solution instead.
Hope this helps someone in the future!
This also works, without the need for the hidden div.
<!--[if mso]>
Outlook content
<![endif]-->
<!--[if !mso]> <!---->
Non-outlook content
<!-- <![endif]-->
The trick is to re-open the comment before closing it on the 4th line - the
<!---->
bit. If you don't do that, IE renders "-->" before the non outlook content. Other browsers don't have that problem.
Although CodeMoose's solution does hide the fallback; in my tests, it left space for where the fallback would be (I read that Outlook doesn't render overflow:hidden). That didn't work for my layout since it bumped other elements out.
After a lot of searching, I found that if you make a small modification to CodeMoose's suggestion, it'll hide your fallback and won't add any unnecessary spacing:
<!--[if mso]>
<v:shape>...</v:shape>
<![endif]-->
<[fallback goes here] style="mso-hide:all;">
By adding "mso-hide:all;" to the actual style of your fallback, Outlook will collapse and ignore your fallback code, thereby preserving your layout. And your fallback still displays fine in clients that can handle the complex CSS you used VML to try to replicate, like in Outlook for Mac.
I had some troubles with Outlook falling back to Times New Roman when using a custom font with #font-face declaration. Not only did I have to hide the #font-face declaration from Outlook using the conditional around it's own style block. (all other styles go in another block). I also had to double wrap my textual content in spans with the conditional tag. Just to give an example of how this technique as posted by #CodeMoose (above) works while using a custom font.
<!--[if !mso]><!-->
<style type="text/css">
#font-face {
font-family: 'Museo100';
src: url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot');
src: url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.woff') format('woff'),
url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.ttf') format('truetype'),
url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.svg#museo100') format('svg');
font-weight: normal;
font-style: normal;
}
<!--<![endif]-->
First I tried to put the conditional around my "Museo300" font declaration inside the inline style but that obviously didn't work, so I had to double wrap my content into two span's with style declarations. The inner one being conditional for non MSO.
<span style="color: #00B2EB; font-family: arial, sans-serif; font-size: 14px; line-height: 19px; font-weight: normal;">
<!--[if !mso]><!--><span style="font-family: Museo100;"><!--<![endif]-->
Text goes here, shown in Museo in Apple mail while this method shows in Arial in Outlook (and others that do not support custom fonts
<!--[if !mso]><!--></span><!--<![endif]-->
</span>
This works great in getting Outlook to show the text in Arial while Apple mail will show the text in font Museo. Other clients (like mail on Android) have a normal fallback behaviour and just show Arial.
I'm using :first-line { line-height:0px; } to hide the empty first line in a block statement
curiously if I define doctype in XHTML strict Firefox ignores this statement and prints the empty line (seeable through the border)
I validated my quellcode and used Firefox' webdeveloper to check, if there is anything wrong, but they told no error
the (stripped) example quellcode is:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>T</title>
<style type="text/css"><!--
.v { white-space:pre; display:inline-block; border:1px solid black; }
.v:first-line { line-height:0px; }
--></style>
</head><body>
<p class="v">
Foo
Bar
</p>
</body></html>
Is there anything wrong with my code and other browsers (I've tested Opera,Gnome,Safari) just ignore the strict, or is Firefox buggy abiding strict?
I'm not sure if it's really a bug …
I guess the internals of the :first-line selector fail to recognize an empty line with just a newline character in it, but I'm not sure if this is wanted or not. There is nothing inside the W3C Recommendations to prove this behaviour as wrong or right:
CSS 2.1 Specifications:
5.12.1 The :first-line pseudo-element
The :first-line pseudo-element applies special styles to the contents
of the first formatted line of a paragraph.
--
16.6 White space: the 'white-space' property
'white-space'
...
pre This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.
If you're generating your HTML code dynamically just try to eliminate the empty line before outputting it. That's the only advice I can give at the moment.
Try using two colons instead of one. From Mozilla:
The :first-line CSS pseudo-element applies styles to the first line of
a element. However, the selector :first-line does not match any real
HTML element.
The CSS3 #font-face rule breaks a Razor section with the error message: CS0103: The name 'font' does not exist in the current context. It crashes at runtime.
It seems the CSS3 # character is the problem that causes the Razor parser to fail.
Example:
#section HeadCustomStyleBlock {
<style type="text/css">
#font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.ttf);
}
<style>
}
For context, the #section HeadCustomStyleBlock is being included in the Layout page's <head> element.
Instead of moving this to an external file, can I implement a workaround to keep it inline?
As per ScottGu's blog:
In cases where the content is valid as code as well (and you want to
treat it as content), you can explicitly escape out # characters by
typing ##.
http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx
Sometimes you want two body backgrounds. One for the header and one for the footer.
I accidentally discovered that it is possible to style the actual <html> tag.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
CSS:
html {background:#000}
Is it OK to style this, or will it cause any problem?
Although it's debatable as to whether it's valid [see here]:
For HTML documents, however, we recommend that authors specify the
background for the BODY element rather than the HTML element. ...
Many large sites still use it with seemingly consistent results.
Yes, it's OK to style the html tag.
It is very common practice. Used all the time on many websites including this one.