I use html-pdf to convert my html to pdf. But when I include my font as
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700;800&display=swap" rel="stylesheet">
And write in css:
html {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 14px;
}
It renders my font as italic. But in HTML it is normal font. How to solve it? I tried font-face, it did not work
Related
I want to use 2 fonts at the same time for English and Arabic characters. Haven't been able to figure out how to do it :(
These are the fonts I'm trying to use.
Arabic: https://fonts.google.com/specimen/Almarai?query=almarai
English: https://fonts.google.com/specimen/Raleway?query=raleway
On web, it would be as simple as font-family: Raleway, Almarai, sans-serif, Arial;
If anyone knows how to do it, I would really appreciate the help!!
#import url('https://fonts.googleapis.com/css2?family=Almarai&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Almarai&family=Raleway&display=swap');
body {
font-family: 'Almarai', sans-serif;
}
h2 {
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World! is in this font style and I am too!</h1>
<br>
<h2>I am styled as RALEWAY</h2>
</body>
</html>
Explanation: Google fonts provide rules to specify in CSS to import it as you do it also specifies how you use the font in this example I've demonstrated how. you use the import("font link here") to import the fonts or you could link them in the head. then you use the font-family: 'font name here' with an element {} to specify that the font is active. Then that element should be in that font.
I'm using play2-pdf to generate pdf in my application I created firstly the cover page but when I try to add the other pages its added in the same pdf page how can I create multiple pages in the same pdf document also I'm trying to add a footer to the my first page but still have the same problem
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
this is a test
<div style="position:absolute; bottom:0;right:0;margin:24px;">by bSuccess</div>
</body>
</html>
For headers and footers, you can use css paged media module (https://www.w3.org/TR/css3-page/)
Example:
<html>
<head>
<style>
##page {
##bottom-right {
content: "by bSuccess";
font-size: 14px;
}
}
</style>
</head>
<body>
this is a test
</body>
</html>
For page breaks, you can use css page break properties (https://css-tricks.com/almanac/properties/p/page-break/)
Example:
<html>
<head>
<style>
##page {
##bottom-right {
content: "by bSuccess";
font-size: 14px;
}
}
</style>
</head>
<body>
<div>this is a test</div>
<p style="page-break-after:always;"></p>
<div>testing page break</div>
</body>
</html>
I generate pdf from xhtml file but font style is differs with XMHTL.
Here is Java Code
ITextRenderer renderer = new ITextRenderer();
renderer.getFontResolver().addFont("C:/Windows/Fonts/times.TTF", BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);
renderer.setDocument(urlXhtmlFile);
renderer.layout();
renderer.createPDF(os);
os.close();
How to set font style of pdf and html is same (color). Thanks!!!
You should add CSS into your XHTML, there you can manipulate with font size, color etc (change font properties according to your needs):
<html>
<head>
<style type="text/css" media="print">
body {
font-family: "Times New Roman", Times;
font-size: 10pt;
color: blue;
}
</style>
</head>
<body>
</body>
</html>
Also, I suggest you embed font into PDF, as someone opening this PDF without this font installed would not see PDF properly.
I am trying to use the retina-1.1.0.less code from retinajs.com. It isn't working because the background images are not showing up at all.
Here is the html:
<head>
<link rel="stylesheet/less" href="../../scripts/retina-1.1.0.less" type="text/css" />
</head>
Here is the retina.less:
// retina.less
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
#highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
.at2x(#path, #w: auto, #h: auto) {
background-image: url(#path);
#at2x_path: ~`#{path}.replace(/\.\w+$/, function(match) { return "#2x" + match; })`;
#media #highdpi {
background-image: url("#{at2x_path}");
background-size: #w #h;
}
}
#button {
.at2x('images/button.png');
}
Here is the CSS (I don't think it matters, though):
#button {
height: 50px;
width: 50px;
float: left;
margin-right: 10px;
}
button.png and button#2x.png are both in the images folder.
I think I might not have linked to the LESS file correctly, but I have no idea how to fix it.
Thanks
The problem is that there is no LESS compiler script (as suggested by seven-phases-max).
Here is the fix to the html:
<head>
<link rel="stylesheet/less" href="../../scripts/retina-1.1.0.less" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js" ></script>
</head>
I'm looking for CSS code on creating a solid colored table with an image and text wrap. This is to be used in Squarespace. Anyone know how I can get that?
<html>
<head>
<style type="text/css">
.mycss {
background-color: #997E6E;
border: 21px solid #997E6E;
color: #FFFFFF;
font-family: arial, helvetica, sans-serif;
font-size: 15px;
font-weight:normal;
letter-spacing: 1pt;
line-height:1;
word-spacing: 2pt;
text-align: left;
}
</style>
</head>
<body>
<p class="mycss">
As my teacher says, our bodies are the best technology we have! Through it, we can transform ourselves from being blocked and out of balance into being energetic, clear-minded and open-hearted.
</p>
</body>
</html>
If you're doing this outside of the developer platform...
I would put the class inside a div instead of p
<div class="mycss">
<p> As my teacher says, our bodies are the best technology we have! Through it, we can transform ourselves from being blocked and out of balance into being energetic, clear-minded and open-hearted.</p>
</div>
Your css looks fine for the border. If you want to float the image to the right inside this div, add
.mycss img {
float:right;
}