Menu
The CSS3 @font-face rule breaks a Razor section with the error message: CS0103: The name 'font' does not exist in the current context. It crashes at runtime.
It seems the CSS3 @ character is the problem that causes the Razor parser to fail.
Example:
@section HeadCustomStyleBlock { <style type="text/css"> @font-face { font-family: Gentium; src: url(http://example.com/fonts/Gentium.ttf); } <style> } For context, the @section HeadCustomStyleBlock is being included in the Layout page's <head> element.
Instead of moving this to an external file, can I implement a workaround to keep it inline?
461
The best way to deal with FOUT is to make the transition between the fallback font and web font smooth. To achieve that we need to: Choose a suitable fallback system font that matches the asynchronously loaded font as closely as possible. Adjust the font styles ( font-size , line-height , letter-spacing , etc.)
Add a font-face section to your CSS code src: url('fonts/lovely_font. otf') format('opentype'); src: url('fonts/lovely_font. ttf') format('truetype'); As another optional efficiency measure, we can get the browser to check for a local copy of the font in case the user already has it.
Parameter: The @font-face rule accepts four-parameter as described below: font-family: It specifies the font of an element. src: It is used to specify the location (URL) of the external resource ie., it holds the file path (url). font-stretch: It is used to set the text wider or narrower.
As per ScottGu's blog:
In cases where the content is valid as code as well (and you want to treat it as content), you can explicitly escape out @ characters by typing @@.
http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
