i render customs fonts in a webview on the iPad. rendering works and the fonts get displayed as they should. but, the rendering is slow. so everything is on my pages loads up quickly, except for the font-face. any idea how i can speed up things?
thanks
There are a few options you have to optimise your font-face rules. By using a data: url you can use the font inline by encoding in base64. For example:
#font-face {
font-family: "My Font";
src: url("data:font/opentype;base64,[base-encoded font here]");
}
There are some other useful performance considerations and approaches outlined in this article from 2009.
Related
I am working on a web project that is used by security minded people. Some of them have turned off webfonts and due to this the icons such as undo, redo, bulleted list ext.ext. are not showing up.
That being said, the first thing i did was attempted to load the fonts required in my main css file before the TinyMCE code was loaded.
#font-face
{
font-family: 'tinymce';
src: url('fonts/tinymce.eot');
src: url('fonts/tinymce.eot?#iefix') format('embedded-opentype'),
url('fonts/tinymce.woff') format('woff'),
url('fonts/tinymce.ttf') format('truetype'),
url('fonts/tinymce.svg') format('svg');
}
However this has still not resolved my issues. Is there any guidance anyone can give me as to a way to get these icons to show?
Since webfonts are blocked I ended up having to change to a different editor ckeditor. here is there site http://ckeditor.com/demo.
I would like to choose fonts in a web page using logic along the lines of "if you have this system font A, use it, otherwise download and use font B".
I can do this in CSS like so:
#font-face {
font-family: B;
src: url('B.ttf');
}
p {
font-family: A, B;
}
My question is: If the system has font A installed (i.e. font B is never actually required to render the document), is B.ttf downloaded or not - and does it vary between browsers?
The file B.ttf may be requested, even if font A is available on the system and the browser doesn't need to fall back to font B.
Paraphrased from the CSS3 Fonts module spec, §4.7 Font loading guidelines, with a relevant code snippet:
In cases where a font might be downloaded in character fallback cases, user agents may download a font if it's listed in a font list but is not actually used for a given text run.
#font-face {
font-family: GeometricModern;
src: url(font.ttf);
}
h2 {
/* font may be downloaded for pages with h2 elements,
even if Futura is available locally */
font-family: Futura, GeometricModern, sans-serif;
}
Since it's not a requirement (i.e. "may", not "must"), it's the vendor's choice whether their browser downloads a web font for fallback use even if it's not required. As far as I know, Firefox will download B.ttf, and it appears that Safari and Google Chrome won't (I haven't even tested in Opera and IE yet).
So, it looks like this behavior varies between browsers — but there's no right or wrong in such a scenario.
On my website lukewattchow.zzl.org/ I have made it so that when the browser window scales down the website also scales down. However the text inside the divs need to scale down with the background, and images at the same time. Can anyone help?
i assume you will require some Javascript to adjust font size of the BODY based on some fraction of the browser's width:
(untested pseudo-code; since i never write anything HTML, CSS, or ECMAScript)
var body = document.getElementById("theBody");
var fontSizeInPixels = (16*1680)/document.documentElement.clientHeight;
//nominal font size of 12pt (16px) with a 1650px wide browser window
body.style.font-size = fontSizeInPixels+"px";
Edit:
Microsoft had a good article on handling dpi changes:
Making the Web Bigger: DPI Scaling and Internet Explorer 8
Maybe this answer that I just wrote in other question about the same problem can help you
I have some large, dynamically generated SVGs that are being served over a relatively slow internet connection. I'm trying to optimize them to be viewable as fast as possible. If I set the server to Content-Encoding: gzip and Transfer-Encoding: chunked, will any SVG viewers take advantage of that and render it partially, as it is transferred? If not, are there other ways to get it to render as-it-streams? I could break it up into several SVG pieces but that will be a lot of work, I was hoping for server settings...
The most common users use IE7 with the Adobe SVG Viewer plugin.
I doubt it matters but I'm serving with C#/ASP.NET and IIS6.
SVG is streamable (as well as gzipped chunked encoding), so theoretically it is possible to display only partially downloaded file.
I don't know if IE+SVG actually does it. Test it! Do something equivalent of:
echo('<rect…>');
flush();
sleep(10);
echo('<rect…>');
and see if it works.
It seems that at least in Chrome and Firefox SVG does render partially while being displayed directly or inside an <iframe>, but in an <img> it is not rendered until fully loaded.
I have multiple background images (all of my images are either in jpg or gif format) in my website and it renders smoothly in firefox, but some of those images doesn't render in IE and when I scroll through the page some of the images renders and then disappears again. This implies with css sprites too.
Do the HTML and CSS code validate?
Is this a caching issue perhaps? Does the image render well if you refresh the page?If so, add meta no-cache refresh tags to your section.It could be I'm barking up the wrong tree, but i had plenty of caching problems with IE.
This might be the Peek-a-boo bug.
http://www.positioniseverything.net/explorer/peekaboo.html