How to Say "Use The Current Font Weight" Without Making It Lighter/Bolder

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
p {  font-family: 'Open Sans';  font-weight: bold;  font-size: 36px;}
p span {  font-weight: bolder}
p.lighter {  font-weight: 200;}

<p>  Open Sans <span>Bolder</span></p>
<p class="lighter">  Open San Light <span>Bolder</span></p>

How to choose font different font-weight? use bolder one or just font-weight?

You would use the latter, like this:

font-family: helvetica; 
font-weight: bold;

or you can use this:

  font-weight: bold;

Note, you likely should include more fonts, as not all browsers will render helvetica, so you could use something like this:

font-family: Helvetica,Arial,sans-serif;

Edit to match the above edit:

he values you can use are normal (which is the default weight), bold, bolder, lighter. You can also use the values from 100 to 900, the higher being bolder. You can also use initial and inherit.

Note font-weight should work fine with Chinese; the fonts themselves are the ones you need to pay attention to.

Font-weight less than 400 on inputs

input elements (and others like textarea, etc.) do not inherit font from the parent element. They have their own default fonts.

If you change your CSS selector to html, input, you can see it has the appropriate font weight in all inputs.

Why are THs bolder than TDs and how to avoid it?

I checked your code snippet both in Firefox and Internet Explorer (latest versions) and indeed, there is a difference in how the boldness of the th elements is rendered by the two browsers.

The best explanation that I can offer is that the CSS specification does not say anything about how the font-weight of the th elements is to be computed, so how this is to be done is left up to the browser.

In both browsers, if you specify the font-weight on the td and th elements explicitly as in your Table B, then you get a consistent font-weight. In Firefox, the value is set to bold and in Internet Explorer, the bold value is mapped to the font-weight scale value 700 for the Arial font.

In the case of Table A, the font-weight is applied to the parent element, the tr that contains the table cells. In the case of Firefox, the CSS engine inherits the value from tr, that is bold, and you get the consistent font-weight.

However, for Internet Explorer, font weights are computed differently. First, the IE CSS engine gets the inherited value, bold, and applies it to the td elements as a font-weight of 700. For the th element, the IE CSS engine appears to apply the equivalent of bolder instead of bold, and this leads to a computed font-weight of 900, which makes the th elements look bolder.

What you are seeing here is a cross-browser difference due to how the software design engineers decided to interpret the CSS specification in a case where there were no explicit guidelines as to what to do.

I also noticed that if you change the font-family to something else, you may not see the problem, since browsers read font meta data to decide how to map the font-weight scale to the font-weights indicated in the font meta data.
(See http://dev.w3.org/csswg/css2/fonts.html#font-boldness for some indication of what the CSS engines may be doing in the background.)

As for a fix, well you more or less have it already. Specify the font-weight explicitly by selecting td and th elements directly.

table.a tr {    font: bold 12pt Arial;}table.b td, table.b th {    font: bold 12pt Arial;}

 <h2>Boldness Check</h2>
<table class="a">    <tr>        <th>TH Column 1</th>        <td>TD Column 2</td>        <th>TH Column 3</th>    </tr></table><table class="b">    <tr>        <th>TH Column 1</th>        <td>TD Column 2</td>        <th>TH Column 3</th>    </tr></table>