I am desesperatly trying to get some google font faces to work with Raphael (SVG / VML rendering JavaScript library) on IE8.
At first i tried the google fonts code.
My second try has been to download and convert the fonts to host my own more complete css. Now the fonts show in the html part of the page (inside a modified bootstrap nav dropdown), but it does not work in the VML canvas (generated by Raphael).
Example here :
http://beta.yetiprint.com/fr/etiquettes-autocollantes/4-etiquettes-couleur-ronde.html
Is it possible to get that working in iE8? Any clue?
I can confirm that ScottS’s method works, but I could not fit these instructions in his answer’s comment field.
Instructions for getting custom fonts to work in Raphael by using Cufón:
Go to the Cufón website where you can convert a font to path shapes.
Upload your custom font, choose a font name, and click the Raphael icon at “Customization for 3rd-party scripts”.
Submit the form and download the Javascript file that pops up.
Include this Javascript below the Raphael Javascript include.
Register the font with Raphael like this, where fontname is the name of your font that you specified in step 2: var myfont = paper.getFont('fontname');
Use your font like this in Raphael: paper.print(100, 100, 'Hello World', myfont, 100);
Performance is not great compared to Paper.text, but it works in IE6 and up.
Have you tried the procedures in Raphael to registerFont()? See http://raphaeljs.com/reference.html#Raphael.registerFont. That gives the procedure for getting the font into Raphael.
Based off the link in that page, you should be able to get VML support and thus IE8 functionality. At least theoretically; I've never done it, I just found this information which seems to point in the direction you want to go.
Related
I am digging into an existing reactJS site, and many images are being rendered by using the css content property. I am looking at the css sheet in VSCode, and many classes are appearing with content listed as "". I'm not sure if I need a plugin to view the actual content, but I can't find a way to see it at this point.
I can use alter the content attribute to point to a different image, but want to know where this is being generated so I can alter it at the source. The site is setup to use Contentful, but assets there are called directly on pages, not in css.
.fa-discord:after {
content: "";
}
I'd like to be able to track down where this image is being stored or generated. Any help is appreciated!
That's a Font Awesome icon for Discord, and can be found here. Yes, you need to include Font Awesome on your website if you want to render any of their glyph icons. And you can easily work out whether a website is attempting to use Font Awesome glyph icons or not, as their selectors all start with fa- and replace the content.
Font Awesome icons are generated through an included CSS file, most commonly located in a folder like /fonts/font-awesome/css/font-awesome.min.css.
This file uses unicode characters to generate the corresponding glyph representations, and the specific unicode character for the Discord icon is 392. Thus, content: "\f392" will render the relevant glyph icon.
If a box or square shows up instead of an actual glyph, that means that the font you're using doesn't incorporate that particular unicode glyph. Font Awesome rapidly expands its coverage of unicode glyphs, and you will need to update to at least Font Awesome 5.0.0 in order to use the Discord glyph.
I've been looking for an answer for 3 days straight now (i did sleep a few hours though).
I'm using a wordpress theme that integrates font awesome icons smoothly. But i wanted to alter these icons and use my own, but they won't show in Firefox but do show in Safari, Chrome etc.
I'm using this css code to alter the icon to my own icons:
.fa-euro:before {content:url(http://nip10.nl/xtra-icons/icon-2.png);}
.fa-glass:before {content:url(http://nip10.nl/xtra-icons/icon-1.png);}
.fa-bell:before {content:url(http://nip10.nl/xtra-icons/icon-3.png);}
.fa-coffee:before {content:url(http://nip10.nl/xtra-icons/icon-4.png);}
You can see the website here: www.nip10.nl
Hope someone can tell me how i can alter the css code so the icons also show in FireFox.. I've tried anything from naming images to .jpg files etc. etc..
You should validate your HTML. See here: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nip10.nl
I'm going to guess that the problem is that firefox is running into this error
Line 1069, Column 26: Element style not allowed as child of element
div in this context. (Suppressing further errors from this subtree.)
And failing to parse the embedded style sheet. You should also not embed your large stylesheets like that. Make them external style sheets. Once that's done, find where your HTML error is that's causing the validator to think you don't have the style sheet in the head tag and it should fix itself.
basically a majority of the CSS styles defined for my website are not displayed when opening the page in IE8. This is not only happening for my custom styles (which I load separately through a custom css file), but also for the built-in features of Rockettheme IONOSPHERE template, for example the box1/2/3/4/5/6 module styles. Also, the rounded style is not rendered, and all modules are shown with sharp corners instead.
I am also using a custom css file (called ralph_golfanatics.css), which I load inside the index.php as follows:
$gantry->addStyles(array('template.css','joomla.css', 'ralph_golfanatics.css'));
All custom styles of this file are displayed fine in IE9, but the most important styles are not shown in IE8. Simply adding these css-styles manually in the file template_ie8.css (that file comes with the Ionosphere template package) did not change anything.
Looking forward to receive any help in this matter. The webpage is http://www.golfanatics.de
Thank you all in advance for your hints.
Ralph
Unfortunately, the link you've included isn't working so it's difficult to pin down exactly what the problem is.
If you're referring to rounded borders displaying with sharp corners this is because border-radius is a CSS3 property which is not supported in IE8.
See this link for border-radius browser support.
There are many CSS3 properties which don't work in older browsers; this is expected behavior and most web developers work around this by using either 'progressive enhancement' or 'graceful degradation'. See this link for more information.
Most websites using CSS3 techniques will never look the same in every browser.
As for CSS font-weight options I am trying the ubuntu font.
Link to href='http://fonts.googleapis.com/css?family=Ubuntu:500,300,700,400italic,400'
All body font-weights are 400 (normal) but title is h2 and font-weight=300
All content loads quickly but the title, it has a small delay I don't like.
I'm not sure how it works, I guess ubuntu-400 is in FF font list but it has to get ubuntu-300 from google server.
If this is true or not, is it correct and useful to download ttf sources and load them from my own server?
If it's a FF problem, there's nothing you can do about it before it's fixed. A good workaround solution is to use a JS preloader. This way your page appears nice and tight only when fully loaded. PreLoadMe is unobstrusive and does the job.
It may sound obvious:
I'm used to design mockups of my webpages with illustrator.When I translate everything to css and test the page into my browser I can see that fonts are bigger in the illustrator mockup even if I used the same font setting on the css side.
//in css i have
body{font:Georgia,"Times New Roman",Times,serif;font-size:16px;
font-weight:normal;}
//I wrapped the example text inside "h1" tags
h1{font-size:24px;font-weight:normal;}
//in illustrator I have font georgia,24px,font-style "regular" selected
How could I fix that?
thanks
Luca
They seem to be different fonts altogether - look at the lowercase e and g. Check which font IE is using with the inspector. You can activate the inspector by pressing F12.
EDIT: The font IE8 is using looks like Times New Roman, IE's default font. Try replacing the font:Georgia part with font-family:Georgia. The font property is meant to be used as a shorthand to set all font properties at once and will probably not work when used to set only the typeface.
I would imagine that this is because different browsers handle fonts differently to Illustrator. You can control the font size / spacing and that kind of thing using CSS, as you've noticed - have you got any other font settings you're using in Illustrator like kerning or that sort of thing? That could be affecting it.