After much research, I have found a work-around. It is not the work-around, because it is impossible to make your PDF look like your web page. However, it produces a PDF that is at least legible.
Their are two fundamental problems:
1) the CSS property h1 only sort of applies to the h1 text in your PDF. The .wiki-content h1 also applies, and Confluence has established stupid defaults for each of the 9 wiki heading styles - defaults that conflict with the web page styles.
You must override every attribute with the .wiki-content to control what your PDF headings look like.
2) When exporting to PDF, Confluence stupidly demotes all headings by page heiarchy. This means that your h1 (or .wiki-content h1) style appears exactly once: as the title of your home page. All other pages are h2. Their child pages are h3, and if those pages have children, they are h4, and so on.
On top of that, all of the styles on your page will also be demoted the same amount as the page. This means that if you have a page with text in h1 style, and it has a child with text in h1 style, your first page will display its text in h2 and your child page will display its text in h3.
Therefore, it does you no good to match your .wiki-content heading styles to the web page styles (specifically, the fact that h6 is display: block), because what text is classified as h6 depends on what page it is on. This particular bit of genius should have resulted in an automatic sacking for someone, as it demonstrates that Atlassian simply does not understand the concepts of formatting, exporting, or reading documents.
The best you can do is to redefine the styles to at least not be actively dishonest. Then restrict yourself to no more than 5 heading styles and three pages of depth. You must also surrender any desire to control what your document looks like and accept bare legibility instead, but you already know this because you are using Confluence.
.pagetitle
{
page-break-before: always;
}
#pageNum:before
{
content: counter(page);
}
.wiki-content h1
{ color: black;
font-weight: normal;
font-style: normal;
font-size: 26px; }
.wiki-content h2
{ color: black;
font-weight: normal;
font-style: normal;
font-size: 20px; }
.wiki-content h3
{ color: black;
font-weight: normal;
font-style: normal;
font-size: 18px; }
.wiki-content h4
{ color: black;
font-weight: normal;
font-style: normal;
font-size: 16px; }
.wiki-content h5
{ color: black;
font-weight: normal;
font-style: normal;
font-size: 14px; }
.wiki-content h6
{ color: black;
font-weight: normal;
font-style: normal;
font-size: 14px; }
.wiki-content h7
{ color: black;
font-weight: normal;
font-style: normal;
font-size: 14px; }
.wiki-content h8
{ color: black;
font-weight: normal;
font-style: normal;
font-size: 14px; }
.wiki-content h9
{ color: black;
font-weight: normal;
font-style: normal;
font-size: 14px; }
Still the same?
I add some
h3
{ font-size: 20px; margin: 21px 0 4px 0; }To PDF stylesheet but it does nothing my h3 still shows like 8px