Render Dice on a web page using CSS

To download the font Refer to This Page


When creating a web page you usually have to work with the fonts installed on the browser's computer. Some newer browsers can read an arbitrary TTF file on the web page itself. This means that the browser no longer needs to have the font installed on their machine. This is a controversial feature for a number of reasons which I wont go into here; however, the method below will work on browsers that allow you to specify a font source in the @font-face CSS tag. I've tested and confirmed that this works on Firefox 3.5, Safari 4 and Internet Explorer 8. Unfortunately it doens't work on earlier versions of these browsers.

If your browser is compliant, column 2 will have Dice, otherwise you will just see numbers.

Sample Table

Numbers Dice
0
0
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9

So, how did I work this magic? Well, you can either "View Source" to view this page or try a little experiment by copying the text below into a file and saving it with a .html extension. Then open it in a browser.



<html>
<head>
<style type="text/css">

@font-face {
  font-family: "Dice";
  src: url(https://www.ambor.com/hb/dice.ttf) format("truetype");
  }

.dice { font-family: "Dice", sans-serif }
	 
</style>
</head>
<body>
Here are some Dice <div class="dice"> 0 1 2 3 4 5 6 7 8 9 </div>

</html>