CSS3 @font-face breaks Razor parser - can it remain inline via a workaround?

asp.net-mvc-3 css razor font-face

John K · Jul 14, 2011 · Viewed 11.8k times · Source

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?

Answer

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

CSS3 @font-face breaks Razor parser - can it remain inline via a workaround?

Answer

Related questions