fonts

Center (proportional font) text in an HTML5 canvas

by

You can do this by using measureText var canvas = document.getElementById(“canvas”), ctx = canvas.getContext(“2d”) canvas.width = 400; canvas.height = 200; ctx.fillStyle = “#003300″; ctx.font=”20px sans-serif”; var textString = “Hello look at me!!!”, textWidth = ctx.measureText(textString ).width; ctx.fillText(textString , (canvas.width/2) – (textWidth / 2), 100); Live Demo More elaborate demo

Which monospace font does a browser use?

by

There are 5 generic families that can be used: “serif”, “sans-serif”, “cursive”, “fantasy”, and “monospace”. When a browser sees one of those, it asks the operating system for the default font in that family. Thus, which font a web browser uses is OS-dependent. See Mozilla’s documentation on font-family for details.

How do you load and use a custom font in Svelte

by

If you are using Sveltekit, you can load fonts locally using the static directory. Store your font files under static/fonts, and then use either a CSS file or a <style> tag to reference your font files. /* fonts.css */ @font-face { font-family: ‘Lora’; font-style: normal; font-weight: 500; src: url(‘/fonts/lora-v20-latin-500.eot’); /* IE9 Compat Modes */ src: … Read more

Cross-Origin Request Blocked when loading local file

by

Firefox 68 contains a security patch which restricts the kinds of files that pages can load (and methods of loading) when you open them from a file:// URL. This change was made to prevent exfiltration of valuable data within reach of a local page, as demonstrated in an available exploit. More info: https://developer.mozilla.org/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp I filed … Read more

Set the Navigation Bar Title Font

by

In SwiftUI, at this point we can not change the navigationBarTitle font directly, but you can change navigationBar appearance like this, struct YourView: View { init() { //Use this if NavigationBarTitle is with Large Font UINavigationBar.appearance().largeTitleTextAttributes = [.font : UIFont(name: “Georgia-Bold”, size: 20)!] //Use this if NavigationBarTitle is with displayMode = .inline //UINavigationBar.appearance().titleTextAttributes = [.font … Read more

Why does the calculated width and height in pixel of a string in Tkinter differ between platforms?

by

You have two problems. Let’s tackle them one at a time 1: the difference between python 2.5 and 2.6 on the same platform with the same font These two versions of python use different versions of tk. On my mac box, 2.5 uses tk version 8.4.19 and 2.6 uses 8.5.7. In version 8.5.2 of tk … Read more

CSS – white text on black background, looks bolder

by

The text is bold because of the anti-aliasing algorithm being used in your browser. It’s easy to verify. Take screengrabs in IE, Safari, Firefox and Chrome. They all anti-alias differently. Some make the text look thicker than others. Generally the better text looks white-on-black, the fatter it looks reversed. There’s a full explanation here: http://www.lighterra.com/articles/macosxtextaabug/ … Read more