For a chess puzzle that I'm working on at the moment, I need to
display a chessboard with several queens on it.
found a set of free chess fonts.
Is this a "web page" or a "local HTML page" ?
If it's a page that's on your computer(s) and only needs to work
there, then this is easy to do with a font. If it's for the public
web, then I might regard it as too difficult and would use images
instead.
I assume you've got a font like Chess Cases
<
http://www.enpassant.dk/chess/downl/cases.zip>
This represents each piece as a simple mnemonic lower-case letter so
that "k" is a white king, "l" (next letter after k) a black king, "o"
are pawns etc. Authoring the HTML to use this is easy and the CSS
just needs font-family: 'Chess Cases'; I don't know how consistent
this naming is among other chess fonts.
The drawback is that this approach needs the font to have been
installed on the user's computer _beforehand_. OK for yourself or some
friends, possibly usable on the web for keen users (provide a link to
download the font) but it's not a general solution for casual web
users.
The sad thing is that CSS doesn't have much practical ability to
select arbitrary typefaces, or to download new fonts as required.
There's a tool called WEFT that can do this, but it's M$oft only and
has many problems in its use. On the whole I'd avoid it.
If you want to make a really general solution, then I'd use images.
This is some minor work in the HTML and CSS, but nothing too
difficult. You can make your own images using one of these fonts (I'd
use Inkscape as a tool to do this, which is a worthwhile free drawing
package to learn about anyway)
I attach your previous chessboard example, re-worked to use this font.
Install it beforehand
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/
TR/html4/strict.dtd" >
<html lang="en" ><head><title>Chessboard</title>
<style type="text/css" >
body {
background-color: #f5deb3;
color: #000080;
}
table.chessboard {
margin: 2em auto;
font-family: arial, sans-serif;
font-size: 1em;
text-align:center;
font-weight: bold;
}
table.chessboard td {
background-color: #eeeedd;
color: #000000;
width: 2em;
height: 2em;
font-family: 'Chess Cases';
font-size: 2em;
}
table.chessboard td.text {
font-family: sans-serif;
font-size: 0.67em;
}
table.chessboard td.dark {
background-color: #b0c4de;
}
</style>
</head><body>
<table class="chessboard" border="0" cellspacing="0" cellpadding="0" <tr>
<td class='dark'>t</td><td >m</td><td class='dark'>v</td><td >l</
td><td class='dark'>w</td><td >v</td><td class='dark'>m</td><td >t</
td>
</tr>
<tr>
<td >o</td><td class="dark" >o</td><td >o</td><td class="dark" >o</
td><td >o</td><td class="dark" >o</td><td >o</td><td class="dark" >o</
td>
</tr>
<tr>
<td class="dark" ></td><td ></td><td class="dark" ></td><td ></
td><td class="dark" ></td><td ></td><td class="dark" ></td><td ></td>
</tr>
<tr>
<td >x</td><td class="dark" ></td><td ></td><td class="dark" ></
td><td ></td><td class="dark" ></td><td ></td><td class="dark" ></td>
</tr>
<tr>
<td class="dark" ></td><td ></td><td class="dark" ></td><td ></
td><td class="dark" ></td><td ></td><td class="dark" ></td><td ></td>
</tr>
<tr>
<td ></td><td class="dark" ></td><td ></td><td class="dark" ></
td><td ></td><td class="dark" ></td><td ></td><td class="dark" ></td>
</tr>
<tr>
<td class='dark'>p</td><td >p</td><td class='dark'>p</td><td >p</
td><td class='dark'>p</td><td >p</td><td class='dark'>p</td><td >p</
td>
</tr>
<tr>
<td >r</td><td class="dark" >n</td><td >b</td><td class="dark" >k</
td><td >q</td><td class="dark" >b</td><td >n</td><td class="dark" >r</
td>
</tr>
</table>
</body></html>
