Mobile-chrome is obstinately overriding my request for font-weight:bold. I've tried everything reasonable, including increasing the "specificity" by adding id's and even the dreaded "!important" rule. Nothing has worked. I'm getting the desired effect on my desktop browsers, just not on my Android HTC One S9 using mobile-chrome.
Ideally I'd like a pure CSS solution since the html will be generated by another program, and it will be a little tedious to write a regex script to handle all the use cases, and I'd rather not have to add <strong> tags everywhere when this ought to be such an easy CSS fix. The code below is just a minimal sample of a much larger collection of webpages.
Some questions:
Is there a pure CSS solution to this where I don't have to modify the html?
Where can I find the default CSS stylesheet that mobile-chrome is using? Even if I can't modify it, just seeing it could help me figure something out.
I confess the Chrome DevTools interface confused me. I connected my phone to my laptop, and indeed saw the undesired output, but I don't know what I should be looking for to actually debug the problem. Any help is appreciated.
Pity that it takes 3 hours to put some text in bold. Code and links below.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS test</title>
<style type="text/css">
code {font-weight:bold;}
code var {font-weight:normal;}
</style>
</head>
<body>
<code>I want this bold.<br><var>I don't want this bold.</var></code>
</body>
</html>
Here's a picture of the mobile view on chrome DevTools showing the problem
