I'm looking for a font which displays a or a * for every character, in the same way. A totally unreadable font.
Despite my efforts I couldn't find one on the internet. Is there a system font like this ? Or do you know one ?
As I doubt that such a font exists, an alternative could be to do your own select. Using the data-* attribute provided by HTML5, you can attach any additional information to any element. So, you can develop a select that would display the character you want (e.g. *) but set data-something to the correct value. Then, when the user press on a button or so, you can call a function to iterate through your personal selects and read the data-something from them to compute the data the user entered.
Here is a minimal example of such a code : https://jsfiddle.net/w0za8ut6/2/
Make one. Just fire up FontForge, the authoritative open source font editor of choice, and make a font with your desired glyph pasted into every letter box that you need supported, or you can craft a cmap 13 font with a single glyph but defined as used for the entire code range, like Adobe's "Blank" font.
Generate your font, pick "web open font" format to make it a WOFF2 instead of a system font like ttf/otf, and done. You can now load it with an #font-face rule.
That said, what you want to do sounds like a weird hack that doesn't actually make passwords any more or less secure, but that's your decision.
The font part at least is almost trivially easy.
Related
I am making an application, and I want to add a "HOME" button.
After much struggling with various icon libraries, I stumbled upon this site,
http://graphemica.com/%F0%9F%8F%A0, with this
🏠
A unicode symbol, which is more akin to a letter than an image.
I pasted it into my HTML, and it just workedTM.
All this seems a little too easy, though. Are unicode symbols widely supported? Is there some kind of problem with them that leads people to use icon libraries instead?
It depends on what do you mean for "safe".
User should have the fonts, so you must include the relative font, and in various formats: there is not yet a format recognized by most used web-browsers.
Additionally, font with multiple colours are not fully understood by various systems, so you should care about what do you expect from users (click, select, copy, etc.).
Additionally, every fonts has own design, so between different fonts (so browsers and operating system) things can look differently. We do not have yet a "Helvetica 'Home'", a "Times New Roman 'Home'".
All this points, could be solved by using a web font, with monochrome glyphs (but it could be huge, if it includes all Unicode code points (+ usual combinations).
It seems that various recent browser crashes if there are many different glyphs, but usually it should not be a problem.
I also recommend aria stuffs so that you page could be used also by e.g. readers (and braille screen).
Note: on the plus side, the few people that use text browser can better see the HOME (not the case in case of an image), if somebody still care about this use case.
Some things you want to make sure you’re doing:
Save your HTML file as UTF-8. In fact, save all text files as UTF-8 unless there’s some reason you can’t.
Put the line <meta charset="utf-8" /> near the top of your HTML file.
Make sure your server isn’t misconfigured to tell all browsers that webpages are in the wrong encoding.
If, somehow, it is and you can’t fix it, fall back on &entities;.
Specify a font stack for your emoji in CSS with a set of fonts that cover nearly every system, perhaps including Apple Color Emoji, Noto Color Emoji, Segoe UI Emoji and Twemoji.
If a free font such as Noto or Symbola contains the emoji you use, you can package it as a WOFF to be sure it will always display the way you want. (As of 2018, Tor browser does not show most emoji correctly by default, but mainstream browsers do.)
I think using unicode is a good practice for development. Beacause The unicodes are essentially part of your operating system so you don’t need any special library or plugin and you treat them like regular text.
The only problem is - code can be defficult to read or understand. I think it is not easy to understand that (ㇼ 8;🏠) printing home icon.
Even the 8 bit PNGs are faster then the font icons.
Image icons can be lightweight but still slow down your site with another HTTP request and time for the image to load. With images you don’t have flexibility over the color and scaling. SVG vector image alternatives are still not faster than plain-text (Unicode characters). Unicode doesn’t require additional HTTP requests and can be made to scale nicely.
If you are developing a website using only simple shapes, you can use unicode UTF-8 symbols as replacement for font icons.
I think :
Almost every developer use libraries for icons because of readablility of code, Easy to use and get more options.
Safe or Not
I can not say whether it is safe or not.
Because Unicode contains such a large number of characters and incorporates the varied writing systems of the world, incorrect usage can expose programs or systems to possible security attacks. This is especially important as more and more products are internationalized. This document describes some of the security considerations that programmers, system analysts, standards developers, and users should take into account, and provides specific recommendations to reduce the risk of problems.
Read about UNICODE SECURITY CONSIDERATIONS
Here are few precautions to be taken while doing that, I did some research and found this to be more helpful for your question. Also I dont know how you can do but credits go to Mr.GOY
Displaying unicode symbols in HTML
We are having a strange issue on three custom made WordPress websites. There are squares randomly visible in the text. These squares are only visible in Chrome for Windows. The squares are visible at https://www.dakcheck.nl. I also made a screenshot of the issue. Do you have any idea what could cause this problem?
You seem to be using characters that are not contained in latin subset. You need to specify the additional subset containing the characters you are using when loading the font. In your example, you need to replace
https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,900,900italic,500,400italic,500italic,300,300italic
...with:
https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,900,900italic,500,400italic,500italic,300,300italic&subset=latin,latin-ext
Note the &subset=latin,latin-ext suffix.
Important note: If the strange characters are not special letters pertaining to your language, the most probable cause is a difference in encoding between your saved files and the webpage. You need to make sure your IDE saves your (.php, .html, .css, .js, etc) files with the exact same encoding as the one declared in the <head> tag of your pages.
Best choice is, by far, UTF-8, but advise on what encoding you should use is out of scope here. The important thing is they have to match.
Additional note: I personally believe you should streamline the usage of fonts in your website and try to drastically limit the number of font weights and variants you are currently loading. You are currently loading 300, 400, 500, 700 and 900 weights in both normal and italic variants. You could probably do with only 400, 700 and 900 and some of them don't even need italic (if not used).
Also note you don't need to change font-weights in your current CSS to streamline font usage. If a font-weight is specified but not present, the browser will automatically use the closest match. For example, if you now have font-weight:500 on an element but only load 400 and 700 weights for the specified font, it will automatically use 400 instead of 500 on the element.
In web development, commonly used font-weights are:
thin (not valid value for font-weight property - define it inside a class definition) usually font-weight:200; - commonly used in conjunction with large font-sizes, to feature large and very thin (~1px) letters
normal (valid value for font-weight) usually translates to font-weight: 400;
bold (valid value for font-weight) usually translates to font-weight: 700;
extrabold (not valid value for font-weight - define it inside a class definition) usually font-weight:900; - commonly used for titles.
I think you will have to edit your content texts: what is present there are control characters, namely end of text control characters in places it is not supposed to be:
Ie navigating to https://www.dakcheck.nl/ and invoking
var t = document.getElementsByTagName('h1')[0].innerText;
t.charCodeAt(t.indexOf('met ')-1)
in the console yields 3.
It is probably caused by copy-pasting from some (desktop?) rich-text editor into WP, although I'd suppose WP editor should handle this.
I've been able to root out phantom characters like that using the HxD hexeditor. You'll see the regular text on the right, and the BinHex on the left. Whatever the phantom character is, use '20' to replace it, and you'll get a regular space without the box.
I am editing a pre-existing site that makes use of icons/glyphs in a multitude of files like eot, svg, w0ff, ttf (I guess for various compatibility). It calls these with the use of the font and a CSS value like this:
font-family: icons_filename;
content: "\e601";
So how would I find a list of the different values of the icons called with "content"?
In other words, I am trying to see what is possible in an undocumented library of icons that don't necessarily have a good list of names.
I also don't understand how the value "\e601" is used or how to look that up in a file. This part of CSS is unfamiliar to me and I cannot find a good explanation for this as most icon tutorials only show how to use a documented library.
Thanks
I believe you're looking for UTF-8 characters. Icon fonts generally override the default font on this universal icon font if they exist. Here's a link to where you can view them.
Adding onto what Chris already said, you should be able to track down which font icon library your template/theme is utilizing. One of the most common examples of these would be Font Awesome.
From the link above, you'll have the ability to go through each icon and figure out which "unicode" to select. For example, "fa-blind" (blind man walking icon) has a unicode of "f29d", which translates to "\f29d" when using it for the CSS property "content"
If your stylesheet is served in UTF-8, you can avoid the need for unicodes (f29d in our example), and directly copy/paste the icon should it be listed on a site for you (i.e, instead of "\f29d" in the content, it'll be the actual fa-blind icon glyph. It'll show up as a blank square in your CSS document, but will render properly when you're on the webpage.)
I might've gone on too long here, but ultimately what you need to do is figure out which library of icons the site is utilizing. We could easily figure it out for you if a link is provided.
maybe this question is too easy, but I couldn´t find anything helpful.
I know how to define a custom font in a CSS file by #font-face.
What I don´t know is how I can find out which code I have to use to display a certain symbol.
To make my request clearer I can give you a simple example:
How can I display the second snoopy icon from this font on a webpage?
http://de.fontriver.com/font/snoopy_dings/
And how do you find out the code for a certain symbol?
Thank you for your efforts,
Robert
First of all you need to find out the relevant letter that maps to your symbol. for that download that font and install it to your computer, open up a word processor and use insert symbol feature. So you can find the relevant English letter. Lets say it is "L".
Then you just type L in HTML and set the font through CSS.
for your problem, it is "B" so to display the second snoopy icon from this font on a web page you need code below.
HTML
<span class="snoopy">B</span>
CSS
.snoopy{
font-family: "Snoopy Dings";
}
I guess your symbol is a letter, but the font is so weird that it doesn't look like a letter. Use you font and try to write the B letter. It should be your Snoopy icon.
Unless you have a alphabetic chart there's no easy way to find out what icon is linked to what other letter. The easiest solution is to just type out the letters in that font and see what pops up.
There's actually an option in the site to try each letter (under Probefahrt). That gives you an input in a normal font and outcome in the custom font.
I have a javascript application, that converts text in runes using the Unicode rune chart. The problem is, that some fonts do not contain the rune symbols.
Mozzila Firefox simply finds out the correct font and uses it for runes, instead of Goudy Medieval and Times New Roman. Google Chrome is not capable of doing that and displays black boxes instead of runes.
So my question is:
How can I find out which web-safe font supports these symbols?
Can I find which font does Firefox use at any point of the document?
Re. 1.: Use a character map program. (On Linux, use e.g. gucharmap, where you can search for the character, and by right-clicking on it (and holding), you can see the font used. You can also switch to other (non-default) fonts in the program and see if the character is present in that font too.)
Re. 2.:
Highlight the text whose font-family you want to determine.
Right-click and select Inspect Element.
In the Developer window that should open, on the right hand side, there should be a Rules column with a bunch of CSS rules. You'll usually have to scroll to the bottom there, and somewhere in there you should find the applicable font-family (inherited or custom-specified) list of which fonts to preferably use.
Compare this list (which may be a single item) with the list of fonts installed on your system. The first matching font between that list and what you have installed would be what Firefox is using.
Use a font-manager program (on Linux this might literally be "font-manager") to get a list of fonts installed on your system.
if rune is an open type font ligature, you can view the font's open type features a few ways....microsoft typography has a free tool u can download, install, then right click on an open type font, some new tabs will appear with the usual ones...one of them is properties. click on that guy, it'll have a list of all the features.
you can also use photoshop, i know if you select an open type font as the text in use, you can then view it's open type features. here's some images of exactly how to do it...sorry for the quality, these are from CS4: http://dev.bowdenweb.com/css/fonts/accessing-open-type-features-in-photoshop.html
so that's how you can tell what features they offer. i'm not sure if runic is a feature itself, or just a design term....that said, quick google search and "Junicode" is a medieval font with the "Junicode is an advanced Unicode font for medieval scholars, including the full range of characters for languages written in the Latin script" http://www.filewatcher.com/d/FreeBSD/8-stable/sparc64/junicode-0.7.6.tbz.1331504.html
but maybe your heart is set on your font....i can't find alot about the rune chart, sorry. you can search the entire open type font features list....i know microsoft typography has it listed, as does adobe...but neither are great for searches, and i'm also not a fan of their naming conventions, which confuse me even more.