Another cufon question.
What I'm basically trying to do is render something like this correctly.
This is the best product ever
I had assumed that cufon would replace the italics with an italic version of the font, but now it would seem that it's only intended to replace a whole block that happened to ALL be italics. Do I correctly understand that replacing a contained single word (or short phrase) with italic version, or bold etc, is out of cufon's capabilities?
To be honest, what I wanted to do was use a completely different font for italic, specifically a block font for the heading, with a fancy script font for the em text.
I assume I'm out of luck and cufon can't do something like this? I know it's a bit irregular, but it seemed like a potentially good way to recreate this designer's "vision" without having to export an image for each heading.
You can use more than one font with Cufon.
Make your Cufon call like this:
<script type="text/javascript">
Cufon.replace('span.regular', { fontFamily: 'RegularFont' });
Cufon.replace('span.bold', { fontFamily: 'BoldFont' });
</script>
Then use two span elements in your phrase, like so:
<span class="regular">This is <span class="bold">Cufon</span> using two fonts.</span>
Related
I am trying to change the style of a mathjax radical sign
and of an exponent. my code is
_stringOfHtml += "\\(^{"+tString+"}\\)"
and
_stringOfHtml += "\\(\\sqrt{"+tString+tString + "}\\)"
When I try to do this:
"\\(^{"+tString+ "}\\{style{font-family:reportschool, TeX, Arial, sans-serif;}\\)";
it does not work- I want to change it inline . Can anyone tell me how to add the style change?
Thanks!
There are a couple of problems you're facing.
the syntax of \style is \style{css}{math}.
You cannot override math font settings this way as MathJax only supports particular fonts, see http://docs.mathjax.org/en/latest/font-support.html for more information. (You could override the font settings for \text{} that way, e.g., \style{font-family: Arial, sans-serif;}{\text{hello}}
Even if you could override the font, your results would likely be bad. Neither Reportschool nor Arial have the necessary glyphs to build stretchy characters such as roots.
\class{css-class-name}{math} is another way of applying custom style
i'm with some doubts here, i've trying to find a tutorial or example on 'how to' but i can't find any.
I have a good knowledge in css (not professional, but i understand) and when working with some templates or tutorials i've seen some flat icons on the website, when i go to the css class, what i found is something like these: "example:before { content: "\e00a"; }"
I'd like to know how is it done? How can i change it to another icon? Or even, how can i create another 'flat icon' based on the same process?
If anyone can help me, please.
Thanks
You can use the content property for icons for example. \e00a for example refers to this character:
It can be used as the bullet point for list items:
li:before {
content:'\e00a'
padding-right:12px;
}
Some fonts come with characters like the ones found here. You can use those characters like \f042 for example to display the screen contrast symbol. however you will need to download the font first to make use of it. Read more about #font-face here
Use Predefined CSS files like "fontawsome" or "glyphicons" (Google It). And then use their css class like <i class="fa fa-facebook"></i> this will show facebook icon.
You are looking for font icons. This gives you scalable vector icons that can be customized with CSS on size, color, drop-shadow, etc. -- Font Awesome
Here is a great example.
http://fortawesome.github.io/Font-Awesome/icons/
For my Wordpress website, I have added the cufon plugin and uploaded my font. The code (shown below) is what I put in the cufon plugin box to have my uploaded font show. The font is quite faint and there is no "bold" version of the font. I would really appreciate help for the following that I just can't figure out:
Increasing the font weight of the font or making it bold.
Replacing my navbar menu font with this Gruppo font (I'm not sure the replacement code for changing it)
Cufon.set('fontFamily', 'Gruppo').replace('#content');
You would have to access the stylesheet of your theme and just find the block referring to the nav-bar styles and switch out the font right there. Make sure you know what you're looking for (e.g. class name or id name for the specific nav-bar). Something like this:
.nav-bar-style{
font-family: 'Gruppo';
}
You can get to your style.css right from the editor under Appearance tab or if you are in ftp you can just go into the file by navigating to it. Usually the path would look like
domain.com/wp-content/themes/THEMENAME/style.css (or .../THEMENAME/styles/style.css)
Regarding the boldness issue, only the font itself can provide a browser with a bold version of itself. If the font in question has no bold characters, then it seems to me that you have only the following 2 options:
1) choose another font, this time one with bold characters
2) use the CSS text-shadow property to provide the characters with enough text shadow to look a bit darker, e.g.,
nav-bar {
font-family: 'Gruppo';
text-shadow: 5px 5px 0 black;
}
I'm not sure that this second option will make a dramatic difference, and it might make some letters look weird, but it's easy enough to try.
I want to do some bold text on h1 on my wordpress-site. I have edited the CSS to use font-weight: bold but it seems to conflict with something else.
What happens is, on load it is bold but after load it jumps back to normal weighted text. Could anyone have a look at it:
http://www.norsktvthailand.net/windows/ ?
Stylesheet can be found at:
http://www.norsktvthailand.net/wp-content/themes/squirrel/style.css
Where am i going wrong? The text i want bold is the H1. I have also tried to use:
font-weight: bold !important;
to override other rules. But it seems to be a no-go..
Use inspect element (Google Chrome), firebug (Firefox), developer tools (IE) to see how the render is changing the styles
The page uses the Cufón replacement technique, so the choice of font weight must be made when generating the Cufón code. From the CSS perspective, the heading is not displayed as text at all but by some routines external to CSS.
So, I know that this isn't something that is normally a good idea for a website, but I have a special purpose/intent for such a use:
I have a multilingual dictionary that I'm working with online, where I need one of the languages to be in a specific font, from a file that I specify locally. However, I want this language to be rendered ONLY in this font, as if it is rendered using any other font, it will render incorrectly. That's all fine and dandy, and I can load the file in CSS and whatnot.
But I want to make it so that if it can't load that file, either for one reason or another, or something goes wrong, it can't go to another font. Basically, render this text using this font, and if you can't do that, don't just try and render it with Arial or whatever is the default -- show me blocks, show me a stark something.
I've spent a bit looking around, but am not sure what in CSS I would be using for this. Suggestions/help? Thanks :)
As an update to this question, since April 2013 there exists the Adobe Blank Font, which can be used for that purpose.
You may build a cross-browser css with FontQuirrel WebfontGenerator and the Adobe Blank font files.
If you just need the font in OpenType format you can use this single css file with the already embedded font
You can't do this. Text is text and text has to have a font that it is to be rendered in. If you really want, there's probably some weird JavaScript function that can detect the actual font being used for the text and if it doesn't match the one you want, then you can hide it or something. But in the end, your only option is to have the text displayed in some obscure font, or completely hide the text. If the text is visible, it has to be rendered using some font.
You could also theoretically create your own font where all the characters are just blank, but that seems highly illogical and such a waste of resources to make people download a font just so it can display meaningless emptiness.
There is no "don't render fonts" option. It's a font, it needs to be rendered, or else it's hidden visually in the DOM.
You could use Javascript to find out the font being applied to a certain block, and if it's not the font you want, just hide it. Or display a message.
Another solution is somehow specify the content to be empty. For example, I'm trying to override the +/- character that a Webix tree displays using Font Awesome:
#lhn-tree-container .webix_tree_open:before {
content: '';
}
This only works with the :before and :after pseudo-elements though.