[GeoffR]

This is what I came up with. It looks the same on my Kobo and in Calibre:

Spoiler:

<h2 class="chapter"><span class="ch"><span class="ct">Chapter</span><span class="cn"> 2</span></span></h2>

.chapter {
  font-weight: normal;
  font-size:2em;
  line-height:1;
  height:2em;
  padding:0;
  margin-bottom:1em;
  border:1px solid #000;
}
.ch {
  float:left;
  padding-top:1.2em;
}
.ct {
  font-size:1em;
  margin-left:-1px; /* just enough to cover the border */
  background-color:#FFF;
}
.cn {
  font-size:2em;
  line-height:0;
  background-color:#FFF;
}

I'm not quite sure what proportions you are aiming for, but if you want something that depends on the height of the numerals then I think you have no choice but to embed your own font. There is no way to know what fonts will be on a device, and so no other way to know if the numerals have the height and positioning you expect.