Posts

Showing posts with the label Fonts

Convert Or Extract TTC Font To TTF - How To?

Answer : Assuming that Windows doesn't really know how to deal with TTC files (which I honestly find strange), you can "split" the combined fonts in an easy way if you use fontforge. The steps are: Download the file. Unzip it (e.g., unzip "STHeiti Medium.ttc.zip" ). Load Fontforge. Open it with Fontforge (e.g., File > Open ). Fontforge will tell you that there are two fonts "packed" in this particular TTC file (at least as of 2014-01-29) and ask you to choose one. After the font is loaded (it may take a while, as this font is very large), you can ask Fontforge to generate the TTF file via the menu File > Generate Fonts... . Repeat the steps of loading 4--6 for the other font and you will have your TTFs readily usable for you. Note that I emphasized generating instead of saving above: saving the font will create a file in Fontforge's specific SFD format, which is probably useless to you, unless you want to develop fonts with Fontforge. ...

Converting And Rendering Web Fonts To Base64 - Keep Original Look

Answer : In the Font Squirrel Expert options, make sure to set the 'TrueType Hinting' option to 'Keep Existing'. Either of the other options will cause the TrueType instructions (hints) to be modified, which will in turn affect the rendering of the font. Alternatively , if you're happy with the rendering of the font directly from GWF, you can just take that file and do the base64 encoding yourself. In OS X or Linux, use the built-in base64 command in Terminal/shell: $ base64 myfont.ttf > fontbase64.txt For Windows, you'll need to download a program to encode in base64 (there are several free/Open Source tools available). Copy the contents of that file, then use in your CSS as: @font-face { font-family: 'myfont'; src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype'); font-weight: normal; font-style: normal; } (Note that you may need to make some adjustments to the various @f...

Calligraphic E (not \mathcal)

Image
Answer : Try doing: \documentclass[12pt]{article} \usepackage{mathrsfs} \pagestyle{empty} \DeclareMathAlphabet{\mathpzc}{OT1}{pzc}{m}{it} \begin{document} The sample space is $\mathpzc{E}$. \end{document} See The Comprehensive LaTeX Symbol, page 68 for a pretty complete list of math fonts available and how to get to typeset them. You can also check A comprehensive review of mathematics in (La)TeX, page 95 onwards. There's also The LaTeX Font Catalogue - Calligraphic and Handwritten Fonts. You can try rsfs: The code \documentclass[12pt]{article} \usepackage{mathrsfs} \pagestyle{empty} \begin{document} The sample space is $\mathscr E$. \end{document} produces

Algorithm To Implement A Word Cloud Like Wordle

Answer : I'm the creator of Wordle. Here's how Wordle actually works: Count the words, throw away boring words, and sort by the count, descending. Keep the top N words for some N. Assign each word a font size proportional to its count. Generate a Java2D Shape for each word, using the Java2D API. Each word "wants" to be somewhere, such as "at some random x position in the vertical center". In decreasing order of frequency, do this for each word: place the word where it wants to be while it intersects any of the previously placed words move it one step along an ever-increasing spiral That's it. The hard part is in doing the intersection-testing efficiently, for which I use last-hit caching, hierarchical bounding boxes, and a quadtree spatial index (all of which are things you can learn more about with some diligent googling). Edit: As Reto Aebersold pointed out, there's now a book chapter, freely available, that covers this same terri...

CSS Transform Skew Without Blur

Answer : I have yet to see any pure CSS solution to fix blurry text after a transform - but I'm happy to be proven wrong! I've found it best to never skew or transform text and instead skew the image, border etc., then just position the text over the top. For example: body { margin: 0; } nav { display: flex; margin-left: -54px; overflow: hidden; } article { position: relative; width: 100%; } section { min-width: 300px; margin-top: 130px; margin-left: 70px; } aside { background-image: url('https://i.redd.it/kvowi2zio7h01.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: 0; transform: skew(-15deg, 0deg); transform-origin: bottom center; z-index: -1; width: 100%; height: 200px; } aside::after { content: ""; height: 100%; position: absolute; border-right: 20px solid #fdcb6e; } article:nth-child(2n) aside::after { border-right-color: #e84...

CSS Font "Helvetica Neue"

Answer : It's a default font on Macs, but rare on PCs. Since it's not technically web-safe, some people may have it and some people may not. If you want to use a font like that, without using @font-face, you may want to write it out several different ways because it might not work the same for everyone. I like using a font stack that touches on all bases like this: font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; This recommended font-family stack is further described in this CSS-Tricks snippet Better Helvetica which uses a font-weight: 300; as well. This font is not standard on all devices. It is installed by default on some Macs, but rarely on PCs and mobile devices. To use this font on all devices, use a @font-face declaration in your CSS to link to it on your domain if you wish to use it. @font-face { font-family: Delicious; src: url('Delicious-Rom...

CSS Font Border?

Image
Answer : There's an experimental CSS property called text-stroke, supported on some browsers behind a -webkit prefix. h1 { -webkit-text-stroke: 2px black; /* width and color */ font-family: sans; color: yellow; } <h1>Hello World</h1> Another possible trick would be to use four shadows, one pixel each on all directions, using property text-shadow : h1 { /* 1 pixel black shadow to left, top, right and bottom */ text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-family: sans; color: yellow; } <h1>Hello World</h1> But it would get blurred for more than 1 pixel thickness. UPDATE Here's a SCSS mixin to generate the stroke: http://codepen.io/pixelass/pen/gbGZYL /// Stroke font-character /// @param {Integer} $stroke - Stroke width /// @param {Color} $color - Stroke color /// @return {List} - text-shadow list @function stroke($stroke, $color) { $shadow: (); $from: $stroke*-1; @for $i from $from thr...

Correct Apache AddType Directives For Font MIME Types

Answer : I realize that this question is old, but for anyone looking for a quick copy/paste for adding font MIME types to their .htaccess: <IfModule mod_mime.c> AddType application/vnd.ms-fontobject .eot AddType application/x-font-opentype .otf AddType image/svg+xml .svg AddType application/x-font-ttf .ttf AddType application/font-woff .woff AddType application/font-woff2 .woff2 </IfModule> I just did some research on IANA official list. This appears to be the current state of the play as at May 2013: These three are official and assigned by IANA: svg as "image/svg+xml" woff as "application/font-woff" eot as "application/vnd.ms-fontobject" These are not not official/assigned, and so must use the 'x-' syntax: ttf as "application/x-font-ttf" otf as "application/x-font-opentype" It appears that the 'font' type does not exist...

Can't Delete Font Files

Answer : This Registry key manages fonts that the system knows about: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts I discovered in an older answer that removing a value of that key or changing a value's data to point to a nonexistent file will make Windows not see the font as usable. Therefore, if you remove the Registry entries that correspond to the fonts you want to torch (and then restart to make the system reload everything), you should be able to delete the fonts' files. If the above does not work on Windows 10, you can also STOP and DISABLE the following two services: Windows Font Cache Service Windows Presentation Foundation Font Cache 3.0.0.0 Reboot your computer, delete the font files, and re-enable the services by setting the Startup Type back to 'Manual'.

Can I Convert Embedded Base64 Encode Font To A Font File?

Answer : Copy the base64 encoded part and convert it. There are many ways to do that. Linux base64 -d base64_encoded_font.txt > font.woff Mac OS X openssl base64 -d -in base64_encoded_font.txt -out font.woff WIndows Go to http://www.motobit.com/util/base64-decoder-encoder.asp and paste the text. Choose "decode the data from a Base64 string (base64 decoding)" and "export to a binary file". @mcrumley's answer is correct, but for those of you who can't figure it out and/or are afraid of the command-line, I have an alternate method. I just Googled your question, and found http://base64converter.com/ which can convert/decode (and encode) any base64 file back to its original format. I'd used it to encode and decode base64 images in this past, but this was my first attempt with a font. As a test I plugged in the embedded base64 font info I found in a random webpage's css file. You don't want the entire entry, leave off the css in...