So i recently downloaded (http://www.figlet.org/) the figlet application to create big text our of digits and symbols for html themes.
I finally managed to create my big text message using the 'Roman.flf' font and saved it to my computer (always a '.txt' file)
So then i copied and pasted the text from the '.txt' file into my tumblr html but apparently the text is too big so it gets messed up and you can't even read the text in my html. And I'm trying to make it as a figlet message as a theme credit for my theme.
Does anyone know how to change the font size or size of the figlet text in the JAVe program?
The ASCII art for normal figlet fonts is done in only one size. Your best bet is changing the font size of the text you're using to display the output. Also, browsers like to collapse multiple white spaces into a single white space, so you may want to make sure that also isn't happening.
Related
(Discaimer: I only learned to code alone and upload some contents.)
I retrieved a symbol for a running person and used the code to build an html file to upload. The problem is that the image appears in different ways in different browsers.
A temporary mwe example.
direct view in my site ramoneando.com
code snippet:
<h1><span style="font-family:'Segoe UI Symbol';color:black;font-size:40px;">🏃</span>runner</h1>
(Desired) Image on local browser.
Why does this happen and how can it be avoided?
I actually am OK with the variants. The worse thing is that some look to the right and others to left. I would prefer to remain with the first image, in dark filling and looking to the right.
The problem is that not every computer has the font Segoe UI Symbol installed, so the ones that don't just display the character with code 🏃 in the default font.
For example, this is what the snippet looks like on my computer
(It used the font Unicode Upper, if you're interested.)
So what you can do is any of the following:
Accept that the "Man running" symbol looks differently in different fonts and keep it the way it is
Use Segoe UI Symbol as a webfont (this may be overkill for displaying just one icon)
Or make a screenshot of the icon and turn it into a png file.
In my website, I want my header to use the 'Tw Cen MT Condensed Extra Bold' font. However, I am only able to create a font using 'Tw Cen MT Condensed' even with adding the bold effect, it does not look the same. I created the banner in photoshop and now I want to replicate the text in CSS.
Below is the link to my current code on Fiddle. Below that is an example of the text I want to create via Photoshop.
Also, is there a way so that I can include the same pattern from my background onto the text?
If all else fails, I could just upload the text itself as an image onto the website, but I would only do that as a last resort.
Thanks.
Link to Fiddle
Banner I want to create
Your going to need to find a web font version of that font for the best results, you can google for it or if the license for the font allows you to create one you can do that.
A good one is
http://www.fontsquirrel.com/tools/webfont-generator
And you'll have to include those files alongside your html and css to load it, otherwise someone who doesn't have the font won't be able to see it and the system will default to a different font.
Unfortunately, it won't work because the font is "non-standard"--as has already been explained.
To get the look you want, create the text banner you want in your image editor (Photoshop?) and save it as a ".png" image file, directing Photoshop to "keep transparency" (I'm using a different image editor, so the command wording will probably be different in Photoshop). To minimize file size, set the image frame bars as close to the font as you can (the more area a ".png" covers, the greater the file size--clear space included--and the size difference seems to increase exponentially [by square]).
All you'll have left to do is manipulate the position of the text banner in the div (float, padding, margin, etc.).
I know this is isn't the answer you want, but it works--and you don't have to worry about contingency code for different browsers, script blockers, etc. (you still have to code for the few who still block images and for accessibility standards, but IMHO it's more effective--and cleaner--than writing contingency code and having to allow for the variability between this font and the widest/narrowest contingency font in your designated family.
At least one part of your page will render the same in just about every browser.
Hello I have a client who's logo is RP but the 'R' is facing the other way. I have been asked if it is possible to display 'RP' every time it is mentioned on the website to appear the same as her logo, instead of 'RP'.
My initial thoughts this was not possible but I have used font-awesome icons in a similar way in titles, but never using an image. This is an example of what I mean using photoshop.
Image Link: http://imageshack.com/a/img537/4474/guj5uS.jpg
I am very wary using this method at all as it must be made responsive etc and I honestly think it is more hassle than it's worth but maybe I'm missing an easy css trick...
Your help would be much appreciated.
Many Thanks
If you can contact with a graphic designer then the designer can make a svg image for you with "RP". That svg you can easily turn to a font using online font converter if you dont have professional software.
And insert the costum font you have created on your website just like inserting font awesome and/or all other icon fonts.
Is as easy as this ... nothing else that needs to be done, but always if the "RP" is in svg format (if you have a graphic designer at your disposal, or if your client can give you the RP logo in svg format).
The simplest approach is to use an image and scale it with CSS to suitable size. For best quality in scaled size, you would create the image in SVG format (there are online tools for converting other image formats to SVG, though ideally you should use an SVG file created by the artist who designed the logo). If you need to worry about old browsers (IE 8 and older) that do not support SVG, you can perhaps set content negotiation in the server so that its sends SVG to modern browsers that announce SVG support and PNG to others. But using just SVG:
<p style="font-family: Times New Roman">This is example text that
contains the logo
<img src="http://www.cs.tut.fi/~jkorpela/upload/RP.svg"
alt=RP style="height: 0.7em">
as an embedded SVG image. The height of the image is set to
0.7em without setting width. This means that browsers will scale
the image <img src="http://www.cs.tut.fi/~jkorpela/upload/RP.svg"
alt=RP style="height: 0.7em"> so
that is roughly of the same height as uppercase letters
and does not disturb line spacing.</p>
I'm writing the documentation for something using some tools that generate html. I would like to embed some high-quality figures into my pages that correspond to:
font size and type should be the same as in the overall html
content;
fully vectorized.
All my figures are generated from LaTeX with tikz. It would be nice to use the same code to generate the figure for html.
I know that svg is supported by browsers but whenever I export my figure to svg, the font type and size are messed up even though I export text as text and not as paths. If the svg has text as text, isn't the browser supposed to print it with the current font type/size?
Is there another way to embed such figures?
The text should be the same size as long as they are defined the same and the SVG diagram is scaled at 1:1.
However, if your SVG has a viewBox, it will probably end up scaled differently, thus affecting the font size. Even if the font size is defined in real-world/physical units like points (pt) or centimetres (cm).
Demo: http://jsfiddle.net/vbYvU/1/
Never seen before that url bar would change its font, but if you go to the following link in Chrome, you would see that "New Features" is written in different font:
Copying url into text file reveals some magic symbols:
http://g-wiki.net/wiki/Battlefield_3%EF%BC%9ANew_Features
Can anyone explain why it changes font and what else can I do with this technique (can I make red bold letters)?
That's a full-width colon character. The only difference should be that it takes more horizontal space; it's not supposed to affect the font and it doesn't do so for me. However, because it's missing from many fonts, some operating systems might switch to a different font or rendering mode in order to display that character, and may continue to apply this change to subsequent text.
I've noticed this before in instant messaging. I'll copy some Chinese characters into my message, and the rest of it will be displayed differently. It's the same effect and I'd consider this to be a bug in the the operating system/font routines. It's probably not been deliberately programmed.