Cómo configurar fuentes en PDF
Una fuente web es una fuente especializada diseñada para su uso en sitios web. Estas fuentes se alojan en servidores web y son descargadas por los navegadores para garantizar una representación coherente y visualmente atractiva del texto en los sitios web, independientemente de la disponibilidad local de fuentes del usuario. Además, las fuentes de iconos, que utilizan símbolos y glifos, se usan a menudo en diseño web para crear iconos escalables y personalizables y mantener una interfaz de usuario visualmente coherente mediante la manipulación de CSS.
CSS incluye fuentes web, lo que le permite especificar archivos de fuentes para descargar cuando se accede a su sitio web. IronPDF admite la carga de fuentes y el renderizado a PDF desde HTML.
Cómo configurar fuentes en PDF
- Descargar biblioteca C# para definir fuentes en PDF
- Utilizar HTML para importar o solicitar fuentes de una fuente externa
- Retrasar el proceso de renderizado para garantizar la carga correcta de las fuentes.
- Convierta el HTML en PDF como de costumbre
- Utilice la regla @font-face en el estilo CSS para importar el archivo de fuentes
Instalar con NuGet
Install-Package IronPdf
Ejemplo de uso de WebFonts e iconos
IronPDF es compatible con WebFonts (como Google Fonts y la API de fuentes web de Adobe) y fuentes de iconos, como las utilizadas por Bootstrap y FontAwesome.
Las fuentes suelen requerir un retraso en la renderización para cargarse correctamente. Si una fuente no se carga correctamente, puede aparecer una página en blanco sin texto. Puede utilizar el método WaitFor.AllFontsLoaded
para esperar la fuente asignándole un tiempo máximo de espera. El tiempo máximo de espera por defecto es de 500 ms.
He aquí un pequeño ejemplo de cómo utilizar un WebFont llamado Langosta en su proyecto.
:path=/static-assets/pdf/content-code-examples/how-to/webfonts-webicons-render-webfont.cs
using IronPdf;
// HTML contains webfont
var html = @"<link href=""https://fonts.googleapis.com/css?family=Lobster"" rel=""stylesheet"">
<p style=""font-family: 'Lobster', serif; font-size:30px;"" > Hello Google Fonts</p>";
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Wait for font to load
renderer.RenderingOptions.WaitFor.AllFontsLoaded(2000);
// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
// Export the PDF
pdf.SaveAs("font-test.pdf");
Imports IronPdf
' HTML contains webfont
Private html = "<link href=""https://fonts.googleapis.com/css?family=Lobster"" rel=""stylesheet"">
<p style=""font-family: 'Lobster', serif; font-size:30px;"" > Hello Google Fonts</p>"
Private renderer As New ChromePdfRenderer()
' Wait for font to load
renderer.RenderingOptions.WaitFor.AllFontsLoaded(2000)
' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)
' Export the PDF
pdf.SaveAs("font-test.pdf")
Explora más opciones WaitFor, como las de fuentes, JavaScript, elementos HTML y ralentí de red en 'Cómo Utilizar la Clase WaitFor para Retrasar el Renderizado de PDF en C#.'
Importar archivo de fuentes Ejemplo
Para utilizar un archivo de fuentes existente, aplique la función @font-face en el estilo CSS. También funciona cuando se utiliza una combinación de la regla @font-face y la incrustación de archivos woff codificados en base64. En el siguiente ejemplo, utilizaré Pixelify Sans Font.
:path=/static-assets/pdf/content-code-examples/how-to/webfonts-webicons-custom-font.cs
using IronPdf;
// Import custom font
string html = @"<!DOCTYPE html>
<html>
<head>
<style>
@font-face {font-family: 'Pixelify';
src: url('fonts\PixelifySans-VariableFont_wght.ttf');
}
p {
font-family: 'Pixelify';
font-size: 70px;
}
</style>
</head>
<body>
<p>Custom font</p>
</body>
</html>";
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
// Export the PDF
pdf.SaveAs("customFont.pdf");
Imports IronPdf
' Import custom font
Private html As String = "<!DOCTYPE html>
<html>
<head>
<style>
@font-face {font-family: 'Pixelify';
src: url('fonts\PixelifySans-VariableFont_wght.ttf');
}
p {
font-family: 'Pixelify';
font-size: 70px;
}
</style>
</head>
<body>
<p>Custom font</p>
</body>
</html>"
Private renderer As New ChromePdfRenderer()
' Render HTML to PDF
Private pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)
' Export the PDF
pdf.SaveAs("customFont.pdf")
Limitaciones de Azure PDF
En Plataforma de alojamiento Azure no admite que los servidores carguen fuentes SVG en sus niveles inferiores de aplicaciones web compartidas. Sin embargo, los VPS y Web Role de Azure no están sandboxed de la misma manera y sí soportan el renderizado de fuentes web.