Can anyone please help me understand what resources the system uses to render fonts on the browser? For e.g. graphics card, memory, etc. Sorry for this vague question but I am facing a problem here. We have a custom font which gets rendered differently in same versions of safari browsers in different systems. For instances, in some systems the fonts appears to be a bit bolder and due to that it is taking up more space to get displayed. All the systems have same resolution.
Safari uses Quartz to render fonts on OS X. I'm not sure what it uses on Windows but it seem it doesn't use Windows rendering engine for that. Quartz utilizes some of the graphic card resources but it's still mostly software rendering.
Quartz has a number of rasterization options that can influence font appearance. One of the most prominent is Font Smoozing. Here's an article about Font Smoothing on support forums. Though, I don't think it should change the amount of space rasterized text actually takes.
You may have problems with fonts themselves. Maybe, different systems have different versions of the font you use and that changes the way it looks. Or your font doesn't get loaded on some systems and Safari uses a fall back font. There may be many reasons. It's hard to tell what exactly causes your problems just from your description.
Related
I am sorry if my question is a bit vague. I am trying to understand where to look for my problems. I have a regression test suite that captures and compare the screen. It seems like whenever we do some kind of library upgrade the regression tests would fail. Our font settings are the same. The difference would be like the graphics card upgrade (driver), window manager upgrade, or just third party library upgrade (for example Qt library). From human visual testing, the fonts look almost identical, but if I do pixel to pixel comparison, it would show that the snapshots are different. Does anyone have insight how the fonts are rendered ?
Graphics rendering on Linux is a proper mess. While Linux is about as old as Windows, Linux first tried to copy the old X11 window system. This was one of the oldest GUI systems in the world, and it shows - the API is beyond horrible. As a result, lots and lots of libraries were stacked on top of X11 to make it workable, with various degrees of compatibility.
To make things worse, X11 was not just a single implementation, there were competing X11 implementations. Linux chiefly used XFree86, which later became Xorg. And because that's not confusing enough, recent developments added a number of alternatives to X11, which support backwards-compatibility interfaces to X11. Some of those GUI libraries on top of X11 are aware of these new libraries, and may now use the new interfaces.
So, you basically have a pretty fragile system, and any library with a decent programming model has shaky foundations. It's no wonder that changing any part may suddenly cause re-rendering, possibly even choosing entirely new rendering paths.
Windows is a bit better, but it too is old and has some competing GUI libraries. The reason why it's better is probably threefold: there's a single party in control of all the interfaces (Microsoft), they were aware of the bad X11 design from the start (avoided beginner mistakes) and Microsoft has far more resources to spend.
But still, both Linux and Windows had to evolve to support Unicode and the much larger fonts it brought, 24 bits color, high-DPI screens, LCD screens with subpixel resolution, accelerated GPU's, etc. And it's been hard for both to dump old interfaces.
I tried to fix font rendering on my Debian 8 computer and with this instructions (http://forums.debian.net/viewtopic.php?f=16&t=88545) i installed infinality. So it helped and now I get much smoother fonts but there is one big problem, font named Lato is completely broken. Look.
This is not a big problem, but this font is used literally everywhere in the web. And this problem not only in firefox, but in whole system. How to fix it? Or I should remove infinality?
infinality is designed to mimick a very specific font rendering found on windows systems. Because MS developed this rendering with a specific font set, it does not work on any random font, since it is designed to hide bugs in windows fonts and windows fonts are designed to hide bugs in windows rendering (that's the problem when you develop code and fonts at the same time).
The default Linux rendering is much more font-agnostic but it is anathema to anyone coming from Windows or OSX (for radically different reasons).
It is useless to explain to any user that the text rendering he is used to is not the alpha et omega, and there are enough ex-windows people they've pushed infinality to the top of the charts
Back in 199[456] I was using Linux and a Matrox graphics adapter. For programming I often used the text mode and didn't bother to boot into X11. These graphics cards allowed for really high text resolutions and still had a very readable font. Occasionally I'd like to test if this font would work well for programming on X11 -- but I cannot find this font to give it a try!
I have searched intensively, for example here, but no font seems to look like the Matrox one. So, the questions:
which font was used? Was it the regular console font that just looked better on those graphic cards?
is this font available for X11? Which one is it?
Any examples / screenshots?
I'd be very glad if anyone could explain if I'm just hallucinating or if my memories are accurate.
UPDATE: I've since found a good resource. Selecting the font Px437_IBM_VGA_8x16.ttf and setting the terminal to 12px comes pretty close to my memories. Since monitor resolutions are much higher now, the font becomes pretty tiny, and scaling it up looks somewhat wrong. I will have to experiment.
This site dumps the ROMs of several old VGA BIOS chips and locates the bitmaps used by the character generator. There's a Matrox card from 1993 in there, but the fonts look quite ordinary to me.
What software or environment were you using, out of curiosity?
Also, have you made any progress on this subject on any other sites? I'm very curious as I'm going to be embarking on a highly relevant project at some point in the future.
I just found this font online -> http://webdraft.hu/fonts/classic-console/
maybe it will help.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there any standard that has a list of web-safe fonts
Is there a list of safe fonts for all browser and os?I use generally tahoma and there isn't any problem for windows but I don't know is there a problem about linux or mac
There's this page, I had it in my Firefox Scrapbook. It covers some of the most useful, widespread fonts and their closest equivalents. Yes it focuses on Windows and Mac. There's a linux/ubuntu/gnome screenshot of the font rendering down there: bottom of the page.
Be wary: this topic is controversial. From a pure design standpoint, the point is moot: there are no equivalent fonts. Never. Using core system fonts your mileage (and your ex width) will vary so wildly that most would simply advise you not to even start.
If you are serious about typesetting you should anyway be using fontsquirrel, google web fonts, or any other #font-face trick. With those, backward compatility will (sort of) be an issue, but not one that's typically considered relevant on linux. (those guys update like crazy)
There are some corner cases though, where I believe this approach is sensible. E.G. You could be searching for a very readable font, and prefer not having the user downloading it. Or you could be in love with some widespread commercial typeface, but can't/won't license it for a reason or the other. (e.g. I personally love the readability Palatino Linotype gives me on Windows)
A last word of warning: if you're targeting mobile devices this approach will drive you insane. Don't even start, or you'll expose your frail soul to the blows of the unmotivated horrors that inhabit Mobile Safari updates. Sanity can't last long under that kind of crossfire.
Short answer: no
There is no guarantee that any given browser / OS will support a specific font.
You can specify families of fonts from which the browser will select the first available font e.g.,
font-family: Arial, Helvetica, Sans-Serif;
This is probably the closest you will get to what you want as it should at least select something of the desired style, if not the exact desired font.
You might take a look at Microsoft's Core fonts for the web project. These fonts are available for Windows, OS X, and Linux-based OSes (among others), but again there is no guarantee that these will be available on any given host.
Like any responsible developer, I'd like to make sure that the sites I produce are accessible to the widest possible audience, and that includes the significant fraction of the population with some form of colour blindness.
There are many websites which offer to filter a URL you feed it, either by rendering a picture or by filtering all content. However, both approaches seem to fail when rendering even moderately complex layouts, so I'd be interested in finding a client-side approach.
The ideal solution would be a system filter over the whole screen that can be used to test any program. The next best thing would be a browser plugin.
I came across Color Oracle and thought it might help. Here is the short description:
Color Oracle is a colorblindness simulator for Windows, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.
Color Oracle is great, but another option is KMag, which is part of KDE in Linux. It's ostensibly a screen magnifier, but can simulate protanopia, deuteranopia, tritanopia and achromatopsia.
It differs from Color Oracle by requiring an additional window in which to display the re-coloured image, but an advantage is that one can modify the underlying image at the same time as previewing the simulation.
Here is a screenshot showing the original figure on the left, and the KMag window on the right, simulating protanopia.
Here's a link to a website that simulates various kinds of color blindness:
http://www.vischeck.com/
They let you check URL's and Screenshots with three kinds of different color blindness types (URL checking is a bit dated though. Image-check works better).
I'd encourage everyone to check their applications btw. Seeing your own app with others eyes may be an eye opener (pun intended).
I know this is a quite old question, but I've recently found an interesting solution to transparently simulate color blindness.
When working with Linux, you can simulate color blindness using the Color Filter plugin for Compiz. It comes with profiles for deuteranopia and protonopia und changes the colors of the whole screen in real-time.
It's very nice because it works transparently in all applications (even within Youtube-Videos), but it will only work where Compiz is available, e.g. only under Linux.
Here's an article that has some guidelines for optimizing UI for color blind users:
Particletree ยป Be Kind to the Color Blind
It contains a link to another article with the kind of tools you were asking for:
10 colour contrast checking tools to improve the accessibility of your design | 456 Berea Street
A great paper that explains a conversion that preserves color differences is:
Detail Preserving Reproduction of color images for Monochromats and Dichromats.(PDF)
I haven't implemented the filter, but I plan to when I have some more free time.
I found Colour Simulations easy to use on Windows 10. This software can apply a color-blind filter to a part of the screen or the whole screen. And what's great is it allows me to interact with my PC normally as if it doesn't exist in fullscreen mode. It runs quite slow in my 4K screen using an integrated graphics card, though.